主干子视图事件答案

【问题标题】：Backbone subview events主干子视图事件
【发布时间】：2013-04-27 09:18:32
【问题描述】：

我有一个使用骨干网开发的网站。我创建了一个应用程序，并在其中创建了一些子视图。

在这个子视图中，我可以有一个 div（id 为close），如果我点击它，我必须触发一个事件。但是事件没有触发，我不知道为什么。你能解释一下我对这个事件有什么问题吗？

问题出在Search.Views.Product，带有事件的子视图。

这是我的应用程序（我已经剪掉了一些内容以便阅读该应用程序）：

//main app
Search.Views.App = Backbone.View.extend({
    initialize:function () {
        var this_app = this;
        this.subView = {
            Product : new Search.Views.Product({
                base_url:this_app.base_url || '',
                collection : new Search.Collections.Products()
            })
        }
    },
    render:function (options) {
        var defaults = {
            products:{
                wrap:"ul",
                id:"product-results",
                class:""
            }
        }
        var settings = $.extend(true, defaults, options);
        this.renderProducts(settings);
    },
    renderProducts:function (settings) {
             $(this.id).html(this.wrap(this.subView.Product.getTemplate(settings.products.view), settings.products));
    }
});

//collection
Search.Collections.Products = Backbone.Collection.extend({
    model: Search.Models.Product,
    initialize:function () {

    }
});

Search.Models.Product = Backbone.Model.extend({
    defaults: search.product.defaults || {},
    initialize:function () {

    }
});

Search.Views.Product = Backbone.View.extend({
    //doesn't fire this event!!!--------------------------------------
    events: {
        'click #close':  'closeResults',
         'click':  'closeResults'
    },
    closeResults:function (event) {
        console.log('Close results');
        $('#close').html('test');
    },

    getTemplate:function (view) {
        var data = this.collection.toJSON() || this.model.toJSON();

        data = this.normalize(data);
        var template = Handlebars.compile($(this.template).html());
        return template({view:view, results:data});
    },
    render:function () {
        // non utilizzato per ora
        return this;
    }
});

【问题讨论】：

标签： jquery events model-view-controller backbone.js

【解决方案1】：

尝试将父视图元素传递给子视图。改变这个

        Product : new Search.Views.Product({
            base_url:this_app.base_url || '',
            collection : new Search.Collections.Products()
        })

到

        Product : new Search.Views.Product({
            el: this.$('.some-selector'),
            base_url:this_app.base_url || '',
            collection : new Search.Collections.Products()
        })

并在您的子视图中将 this.$el 的 html 替换为呈现的模板的内容。

【讨论】：

【解决方案2】：

问题 #1

ID 必须是唯一的。

改为使用类。在标记和事件绑定中将 #close 更改为 .close。

问题 #2

您没有在渲染中设置视图 $el。 Backbone 视图将其所有内部选择器工作委托给它自己的 el。

来自骨干网源

$: function(selector) {
  return this.$el.find(selector);
},

您需要调用 render 并且它需要设置 el 以使事件绑定起作用。

 this.$el.html(...);

【讨论】：

好的。更一般的“点击”绑定会触发吗？