javascript - 在 backbone.js 中，如何使用新模型数据更新 View ，同时在没有完整渲染的情况下保持排序顺序

Question

我在 backbonejs 中有一个 View 绑定(bind)到一个排序的集合。

我想定期用新模型更新集合，但保持排序顺序。

在不完全渲染 View 的情况下将新模型插入 View 的最佳方法是什么？

Answer 1

Collection.add当它触发“添加”事件时，传递一个包含“索引”属性的选项散列，指定如果集合通过比较器排序，则项目被插入的位置。

使用 jQuery 的 nth-child 选择器，您可以将项目插入正确的位置:

    $(function() {

        var ships = new Backbone.Collection();

        ships.comparator = function(ship) {
          return ship.get("name");
        };

        ships.on("add", function(ship, collection, options) {
            if (options.index === 0)
                $('ul#list').prepend("<li>Ahoy " + ship.get("name") + " at " + options.index + "!</li>");
            else
                $('ul#list li:nth-child('+ options.index +')').after("<li>Ahoy " + ship.get("name") + " at " + options.index + "!</li>");
        });

        ships.add([
            {name: "Flying Dutchman"},
            {name: "Black Pearl"}
        ]);

        ships.add({name: "Delaware"});

        ships.add({name: "Carolina"});

        ships.add({name: "America"});

    })

现场示例:http://jsfiddle.net/DRN4C/6/