2

我有一个如下所示的 json 结构，其中“ Position ”是一个排序值。

 [
  {"ID":1, "Title":"Title 1", "Position":1},
  {"ID":2, "Title":"Title 2", "Position":2},
  {"ID":5, "Title":"Title 3", "Position":3},
  {"ID":7, "Title":"Title 4", "Position":99}
];

淘汰排序使用索引对可排序的项目进行排序

有没有办法将此可排序索引值绑定到我的 Position 属性？

这是我的代码的jsFiddle。

基本上，当一个项目被拖到一个新位置时，我想更新视图模块，以便我可以将更改保存回数据库。

4

2 回答 2

2

对于这样的事情，我喜欢向我的 observableArray 添加一个订阅，它需要一次通过数组并正确设置“索引”。

这是一个适用于您的用例的扩展：

ko.observableArray.fn.withIndex = function(prop, startIndex, lastIndex) {
    //by default use an "index" observable
    prop = prop || "index";

    //whenever the array changes, make a single pass through to update the indexes
    this.subscribe(function(newValue) {
        var item;
        for (var i = 0, j = newValue.length; i < j; i++) {
            //create the observable if it does not exist
            item = newValue[i];

            if (!item[prop]) {
                item[prop] = ko.observable();
            }

            //special logic for the last one 
            item[prop]((lastIndex && i === (j - 1)) ? lastIndex : startIndex + i);   

        }
    }, this);

    return this;
};

你会像这样使用它：

myObservableArray.withIndex("Position", 1, 99);

这是您更新的示例：http: //jsfiddle.net/rniemeyer/HVNUr/

于 2013-06-22T12:52:49.323 回答
0

我在列表容器上添加了一个 id，这样我就可以“监听”改变它的 dom 修改。我将更新位置过程包装在计时器中，因为 dom 修改事件被触发了太多次。

var positions = ko.utils.arrayMap(viewModel.Items(), function (item) {
    return item.Position();
});
positions.sort();
var itmer = null;

$('#container').bind('DOMNodeInserted DOMNodeRemoved', function () {
    if (itmer) clearTimeout(itmer);

    itmer = setTimeout(function () {
        var items = viewModel.Items();
        ko.utils.arrayForEach(items, function (item) {
            var index = $('#container [id=' + item.ID() + ']').last().index();
            var newPosition = positions[index];
            item.Position(newPosition);
        });
    }, 50);

});

见小提琴

我希望它有所帮助。

于 2013-06-22T12:14:07.887 回答