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

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

我希望定期使用新模型更新集合，但保持排序顺序

在视图中插入新模型而不完全渲染它的最佳方法是什么

当它触发“add”事件时，传递一个包含“index”属性的options散列，该属性指定如果集合通过比较器排序，则插入项的位置

使用jQuery的第n个子选择器，可以在正确的位置插入项：

    $(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"});

    })

$（函数（）{
var=new Backbone.Collection（）；
ships.comparator=函数（ship）{
返回船舶。获取（“名称”）；
};
ships.on（“添加”，函数（ship、collection、options）{
如果（options.index==0）
$（'ul#list'）.prepend（“
Ahoy”+ship.get（“name”）+”位于“+options.index+”！
”）；
其他的
$（'ul#list li:n子项（'+options.index+'））。在“+options.index+”、“
Ahoy”+ship.get（“name”）+”之后（“+options.index+”！
”）；
});
ships.add([
{name:“飞行荷兰人”}，
{名称：“黑珍珠”}
]);
添加（{名称：“特拉华”}）；
添加（{name:“Carolina”}）；
添加（{name:“America”}）；
})

​

---

实例：

我没有足够的声誉来评论另一个答案（我认为这是一个很好的答案，这只是一个附录），但您应该注意，自版本0.9.9以来，

选项

哈希将不再包括

索引

属性。从变更日志：

为了提高添加的性能，将不再在

add

事件回调中设置options.index

collection.indexOf（model）

可用于根据需要检索模型的索引

在另一个答案中，只需将

options.index

替换为

collection.indexOf（ship）