在backbone.js中,如何使用新模型数据更新视图,同时保持排序顺序而不进行完整渲染

Question

我在backbonejs中有一个绑定到已排序集合的视图.

我想定期使用新模型更新集合,但保持排序顺序.

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

Answer 1

Collection.add在触发"add"事件时,传递一个包含"index"属性的选项哈希,指定在何处,如果通过比较器对集合进行排序,则插入项目.

使用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/