Events 如何使用$el.html（）方法保持主干事件正常工作？

我正在编写一个

主干应用程序

，试图呈现在

输入

字段上写入时检索到的结果列表

这基本上是我的应用程序

var Dropdown = {
    Models: {},
    Collections: {},
    Views: {},
    Templates:{}
}

Dropdown.Models.Product = Backbone.Model.extend({
    defaults: dropdown.product.defaults || {},
    initialize:function () {
        console.log('Dropdown.Models.Product > initialize');
    }
});

Dropdown.Collections.Products = Backbone.Collection.extend({
    model: Dropdown.Models.Product,
    initialize:function () {
        console.log('Dropdown.Collections.Products > initialize');

    }
});

Dropdown.Views.App = Backbone.View.extend({
    initialize:function () {
        console.log('Dropdown.Views.App > initialize');
        this.subView = {
            Product : new Dropdown.Views.Product({
                collection : new Dropdown.Collections.Products()
            })
        }
    },
    render:function (options, term) {
        console.log('Dropdown.Views.App > render');
        var defaults = {
            where:false,
            products:{
                id:"product-results"
            }
        }
        var settings = $.extend(true, defaults, options);
        this.$el.html(this.subView.Product.render(settings.products.view, term).$el);
        // this.delegateEvents();
    }
});

Dropdown.Views.Product = Backbone.View.extend({
    initialize:function () {
        console.log('Dropdown.Views.Product > initialize');
    },
    events: {
        "click .close": "closeResults",
    },
    closeResults:function (event) {
        console.log('Dropdown.Views.Product > closeResults');
        var view = this;
        this.$el.animate({height:0}, 500, function () {
            $(this).removeAttr('style');
            view.$el.hide();
        });
    },
    render:function (view, term) {
        this.$el.show();
        console.log('Dropdown.Views.Product > render');
        var data = (this.collection || this.model).toJSON();
        var template = Handlebars.compile($(this.template).html());
        this.$el.html(template({view:view, results:data}));
        this.delegateEvents(this.events); // to assign events if I'm using $el.html(...)
        return this;
    }
});

该应用程序可以工作，但在调用第二个

render

方法后，我丢失了事件，可能是因为调用了

.html（）

方法

第一次回调：

 ---------------------
| app widget          |
 ---------------------
| result 1            |
| result 2            |
 ---------------------
|               close | <= event closeResults works
 ---------------------

 ---------------------
| app widget          |
 ---------------------
| result 1            |
| result 2            |
| result 3            |
 ---------------------
|               close | <= event closeResults lost
 ---------------------

 ---------------------
| app widget          |
 ---------------------
| result 1            |
| result 2            |
 ---------------------
|               close | <= event closeResults works
 ---------------------

 ---------------------
| app widget          |
 ---------------------
| result 1            |
| result 2            |
 ---------------------
|               close | <= event closeResults works
 ---------------------
| app widget          | <= appended content, it doesn't replace previous result
 ---------------------
| result 1            |
| result 2            |
| result 3            |
 ---------------------
|               close | <= event closeResults works
 ---------------------

事件始终有效，但我将服务器响应累积到应用程序的html中，因此结果如下：

第一次回调：

 ---------------------
| app widget          |
 ---------------------
| result 1            |
| result 2            |
 ---------------------
|               close | <= event closeResults works
 ---------------------

 ---------------------
| app widget          |
 ---------------------
| result 1            |
| result 2            |
| result 3            |
 ---------------------
|               close | <= event closeResults lost
 ---------------------

 ---------------------
| app widget          |
 ---------------------
| result 1            |
| result 2            |
 ---------------------
|               close | <= event closeResults works
 ---------------------

 ---------------------
| app widget          |
 ---------------------
| result 1            |
| result 2            |
 ---------------------
|               close | <= event closeResults works
 ---------------------
| app widget          | <= appended content, it doesn't replace previous result
 ---------------------
| result 1            |
| result 2            |
| result 3            |
 ---------------------
|               close | <= event closeResults works
 ---------------------

---------------------
|应用程序小部件|
---------------------
|结果1|
|结果2|
---------------------
|关闭|可以添加到渲染中

render:function (view, term) {
    this.$el.show();
    console.log('render');
    var data = this.collection.toJSON() || this.model.toJSON();
    var template = Handlebars.compile($(this.template).html());
    this.$el.html(template({view:view, results:data}));
    this.delegateEvents();
    return this;
}

这将把视图事件散列中的所有事件重新绑定到el。
您可以添加到渲染中

render:function (view, term) {
    this.$el.show();
    console.log('render');
    var data = this.collection.toJSON() || this.model.toJSON();
    var template = Handlebars.compile($(this.template).html());
    this.$el.html(template({view:view, results:data}));
    this.delegateEvents();
    return this;
}

这将把视图事件散列中的所有事件重新绑定到el。
我已通过使用
更改
.html
方法解决了我的问题

Dropdown.Views.App = Backbone.View.extend({
render:function (options, term) {
    console.log('Dropdown.Views.App > render');
    var defaults = {
        where:false,
        products:{
            id:"product-results"
        }
    }
    var settings = $.extend(true, defaults, options);
    // NO MORE THIS this.$el.html(this.subView.Product.render(settings.products.view, term).$el);
    this.subView.Product.delegateEvents();
    this.$el.empty();
    this.$el.append(this.subView.Product.render(settings.products.view, term).$el);
}
});
Dropdown.Views.Product = Backbone.View.extend({ 
// ...
render:function (view, term) {
    this.$el.show();
    console.log('Dropdown.Views.Product > render');
    var data = (this.collection || this.model).toJSON();
    var template = Handlebars.compile($(this.template).html());
    // NO MORE THIS this.$el.html(template({view:view, results:data}));
    this.$el.empty();
    this.delegateEvents(this.events);
    this.$el.append(template({view:view, results:data}));
    // to assign events if I'm using $el.html(...)
    return this;
}
});

通过这种方式，它可以工作。
我通过以下方式更改
.html
方法和
.append
解决了我的问题：

Dropdown.Views.App = Backbone.View.extend({
render:function (options, term) {
    console.log('Dropdown.Views.App > render');
    var defaults = {
        where:false,
        products:{
            id:"product-results"
        }
    }
    var settings = $.extend(true, defaults, options);
    // NO MORE THIS this.$el.html(this.subView.Product.render(settings.products.view, term).$el);
    this.subView.Product.delegateEvents();
    this.$el.empty();
    this.$el.append(this.subView.Product.render(settings.products.view, term).$el);
}
});
Dropdown.Views.Product = Backbone.View.extend({ 
// ...
render:function (view, term) {
    this.$el.show();
    console.log('Dropdown.Views.Product > render');
    var data = (this.collection || this.model).toJSON();
    var template = Handlebars.compile($(this.template).html());
    // NO MORE THIS this.$el.html(template({view:view, results:data}));
    this.$el.empty();
    this.delegateEvents(this.events);
    this.$el.append(template({view:view, results:data}));
    // to assign events if I'm using $el.html(...)
    return this;
}
});

这样，它就起作用了。
顺便说一句，你确定你不是指
（this.collection | this.model）.toJSON（）
这里你说的
this.collection.toJSON（）| this.model.toJSON（）
？是的，谢谢，这样更好！顺便说一句，你确定你说的不是
（this.collection | | this.model）.toJSON（）
，这里是
this.collection.toJSON（）| | this.model.toJSON（）
？是的，谢谢，这样更好！我已经试过了，但它仍然不起作用，也许是因为我把它也用作子视图？我委托子视图的事件，而不是没有事件的父视图。这不应该是一个问题，因为它在第一次回调时就可以工作，你认为呢？我已经更新到完整的应用程序结构，以前我认为使用子视图不是问题，但现在我有疑问：）我尝试过这个，但仍然不起作用，可能是因为我也将它用作子视图？我委托子视图的事件，而不是没有事件的父视图。这不应该是一个问题，因为它在第一次回调时就可以工作，你认为呢？我已经更新到完整的应用程序结构，以前我认为使用子视图不是问题，但现在我有疑问：）