Backbone.js视图中的多个模型

Backbone.js Multiple Models within a View

本文关键字:模型 js 视图 Backbone      更新时间:2023-09-26

是否可以创建一个视图,列出绑定到不同模型的集合?还可以使用排序功能吗?

例如,我有"销售"answers"账户"模型,我想用这些部门的所有工作人员的名字来进行查看。

感谢

当然。您通常会使用以下组合:在集合上应用事件侦听器,创建表示每个模型的小子视图,并通过这些子视图绑定模型事件处理程序。

BigView = Backbone.View.extend({
    el: 'ul',  // This view is a <ul> and we'll be adding the model views
    initialize: function() {
        // This collection represents the collection you passed in
        // For our purpose lets say it was a SalesCollection
        this.collection.on('reset', this.addAllSales, this);
        this.collection.on('add', this.addSale, this);
    },
    addAllSales: function() {
        var that = this;
        this.collection.each(function(sale) {
            that.addSale(sale);
        });
    }
    addSale: function(model) {
        var view = new Subview({
            'model': model
        });
        this.$el.append(view.render().el);
    }
});
SaleView = Backbone.View.extend({
    initialize: function() {
        this.model.on('change', this.something, this);
    },
    render: function() {
        this.$el.html();  // Or whatever else you need to do to represent a sale as view
        return this;
    }
    something: function(model) {
        // Code for something
    }
});

因此,在本例中,您的主视图基本上有一个集合(例如sales)。当重置销售集合时,它会启动addAllSales()。每次向集合中添加销售时,我们都会添加一个子视图,该子视图表示特定的模型(销售模型)。在这个子视图中,我们负责将事件绑定到模型更改,然后模型更改会执行某些操作。