如何在不替换整个数组的情况下更改knockoutjs observableArray的索引

时间:2012-10-11 12:54:06

标签: javascript jquery model-view-controller knockout.js

我是一个淘汰新手,基本上我想在页面上做的是,我在视图中加载一个激活细节列表, 每个都有一个与列表项关联的删除链接。 每个激活细节项包含三个属性,index,ActivationDate和ExpiryDate, 例如

    var activationItem = {
            'index': count,
            'activationDate': item.activationDate,
            'expiryDate': item.expiryDate
        };

现在每次用户点击任何特定项目的删除。它应该重新排序所有列表索引仍然反映正确增加的索引。例如1,2,3,4而不是1,3,4如果第2项被移除。

如何更换阵列?如下:

       //Removes selected item from activationlist
self.RemoveActivationListItem_Click = function () {

    self.activationListItems.remove(this);

    var count = 1;
    var replaceArray = ko.observable([]);

    //Re index all of the array items
    ko.utils.arrayForEach(self.activationListItems(), function(item) {

        var activationItem = {
            'index': count,
            'activationDate': item.activationDate,
            'expiryDate': item.expiryDate
        };

        replaceArray().push(activationItem);

        count++;

    });

    self.activationListItems.removeAll();
    self.activationListItems(replaceArray());

    TINY.box.show({ html: "Activation item removed", animate: true, close: false, boxid: 'message',autohide:5,top:90,left:0});

};

有没有比这更好的方法?

1 个答案:

答案 0 :(得分:1)

如果只想显示index属性,您可以在$index绑定中使用foreach敲除对象,并且ko可以自己完成所有工作。请参阅此处的示例:http://jsfiddle.net/AfDQe/1/

如果您需要在视图模型中存储索引,则可以简化删除功能:

self.RemoveActivationListItem_Click = function () {
    self.activationListItems.remove(this);
    var count = 1;

    //Re index all of the array items
    ko.utils.arrayForEach(self.activationListItems(), function(item) {
        item.index = count;
        count++;

    });

    TINY.box.show({ html: "Activation item removed", animate: true, close: false, boxid: 'message',autohide:5,top:90,left:0});

};