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

最简单的方法是在子视图中接受 "clicked" 选项：

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);    
}

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

Backbone.js execute function when subview is clicked

javascript

jquery

backbone.js