Question

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

在这个子视图中，我可以有一个div（标识为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;
    }
});

Answer 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()
        })

在您的子视图中，将此。$ el的html替换为渲染模板的内容。

Answer 2

问题＃1

ID必须是唯一的。

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

问题＃2

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

来自Backbones来源

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

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

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

骨干子视图事件

2 个答案: