单击子视图时Backbone.js执行函数

Question

我有一个名为DatesView的视图和一个名为DateView的子视图。 当我单击DateView的实例时，我想在DatesView中执行一个函数。

var Date = Backbone.Model.extend({});

var Dates = Backbone.Collection.extend({
    model: Date
});

var DateView = Backbone.View.extend({
    events: {
        'click': 'clicked'
    },

    render: function () {
        this.$el.text(this.model.get('date'));

        return this;
    }
})

var DatesView = Backbone.View.extend({
    render: function () {
        this.collection.each(function (date) {
            var dateView = new DateView({model: date});

            this.$el.append(dateView.render().el)
        }, this);

        return this;
    },

    clicked: function() {
        console.log('clicked');
    }
})

var dates = new Dates([
    {date: '01'},
    {date: '02'},
    {date: '03'}
])

var datesView = new DatesView({collection: dates});

$('#container').html(datesView.render().el);

JSFiddle

如您在示例中看到的，DateView具有一个单击事件设置，我想在DatesView中注册它。 现在它的编写方式不起作用。

Answer 1

最简单的方法是在子视图中接受“单击”选项：

var DateView = Backbone.View.extend({
    events: {
        'click': 'clicked'
    },
    initialize: function (options) {
        // allow parent to pass in a click handler
        this.clicked = options.clicked;
    }
    // snip...
})

var DatesView = Backbone.View.extend({
    render: function () {
        this.collection.each(function (date) {
            // pass parentView's click method to child, 
            // binding context to parent
            var dateView = new DateView({
                  model: date, 
                  clicked: this.clicked.bind(this)
            });

            this.$el.append(dateView.render().el)
        }, this);

        return this;
    },
    // snip...

jsfiddle

Answer 2

我非常喜欢使用Backbone事件。 您可以按以下方式使用它：

在您的DateView中触发事件

clicked: function () {
    Backbone.trigger('date:clicked');
}

在DatesView中收听事件

initialize: function () {
    this.listenTo(Backbone, 'date:clicked', this.clicked);    
}