Javascript Backbonejs查看自身模板替换和事件

我正在使用bbjs开发我的第一个应用程序，在完成了10个教程和无数的源代码之后，我正试图提出我的代码设计

我问，视图和模板的最佳实践是什么。还有一个我正在努力解决的问题。 据我所知，视图负责一个元素及其内容（以及其他子视图）。 使代码易于管理、可测试等。。元素/模板将在创建时传递给视图。 在我的应用程序Imho中，视图应该保存模板，因为可见元素有许多“状态”，每个状态都有一个不同的模板。 当状态改变时，我想最好创建一个新视图，但是，视图是否可以用新元素更新自身

App.Box = Backbone.Model.extend({
    defaults: function() {
        return {
            media: "http://placehold.it/200x100",
            text: "empty...",
            type: "type1"
        };
    }
});


App.BoxView = Backbone.View.extend({
    template: {},
    templates: {
            "type1": template('appboxtype1'),
            "type2": template('appboxtype2')
    },
    events: {
      'click .button': 'delete'
    },
    initialize: function(options) {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);

        this.render();
    },

    render: function() {
        this.template = this.templates[ this.model.get("type") ];

        // first method
        this.$el.replaceWith(  $($.parseHTML(this.template(this)))  );
        this.$el.attr("id", this.model.cid);

        // second method
        var $t_el = this.$el;
        this.setElement( $($.parseHTML(this.template(this))) );
        this.$el.attr("id", this.model.cid);
        $t_el.replaceWith(  this.$el  );
        this.delegateEvents();

        //$('#'+this.model.cid).replaceWith(  $(g.test.trim()) );


        //! on the second render the events are no longer bind, deligateEvents doesn't help


        return this;
    },

    // get values
    text: function() { return this.model.get('text');  },
    media: function() { return this.model.get('media');  },
    delete: function() {
        this.model.destroy();
    }
});

---

Thanx！：）

与其尝试替换视图的根元素（$el），不如替换其内容

this.$el.html（this.template（this））

那时事件应该仍然有效。
我提出了以下解决方案：

如果有人有更好的想法，欢迎

基本上，鉴于：

        var t_$el = this.$el;
        this.$el = $($.parseHTML(this.template(this)));
        this.$el.attr("id", this.cid);
        if (t_$el.parent().length !== 0) { // if in dom
            this.undelegateEvents();
            t_$el.each(function(index, el){ // clean up
                if( index !== 0 ){ $(el).remove(); }
            });
            t_$el.first().replaceWith(this.$el);
            this.delegateEvents();
        }

试试这个

render: function() {
    html = '<div>your new html</div>';
    var el = $(html);
    this.$el.replaceWith(el);
    this.setElement(el);
    return this;
}

render:function（）{
html='您的新html'；
var el=$（html）；
此.$el.替换为（el）；
这是一个集合元素（el）；
归还这个；
}

$.replaceWith将仅替换DOM中的元素。但this.$el仍然引用了现在被取代的旧元素。您需要调用this.setElement（..）来更新this.$el字段。调用setElement也会为您取消LegateEvents和delegateEvents事件。
这是显而易见的。我的问题是-如果我想使用一个模板并替换self！