javascript - Backbone.js 视图中的多个模型

Question

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

例如，我有 'sales' 和 'accounts' 模型，并且想用在这些部门工作的人的所有姓名制作一个视图。

谢谢

Answer 1

当然。您通常所做的最终是使用在集合上应用事件侦听器、创建代表每个模型的小子视图并通过它绑定模型事件处理程序的组合。

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

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