我的json结构如下所示,其中“位置”是一个排序值。
[
{"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}
];
knockout-sortable 使用索引对可排序项目进行排序
有没有办法将此可排序索引值绑定到我的Position属性?
以下是我的代码jsFiddle。
基本上,当一个项目被拖动到一个新位置时,我想更新viewmodule,以便我可以将更改保存回数据库。
答案 0 :(得分:2)
对于这样的事情,我喜欢为我的observableArray添加一个订阅,它接受一次遍历数组并正确设置“index”。
以下是适用于您的用例的扩展程序:
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/
答案 1 :(得分: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);
});
我希望它有所帮助。