Html 剔除数组中的可观察字段，以指示项目的顺序

我有一个html视图，它连接到Knockout viewmodel，并显示一个项目列表。 列表中的每个项目都包含一个文本名称字段和一个数字顺序字段。 用户可以对UL列表中的项目执行“拖放”操作。 “拖放”事件更改项目的顺序，如下所示：

 <div id="wrapper">
<ul data-bind="foreach:Items">
    <li draggable="true"
        ondragover="event.preventDefault();"
        data-bind="event:{dragstart:$root.dragItem,drop:$root.dropItem}">
        <label data-bind="text:name"></label>
        <label data-bind="text:orderNo"></label>
        <input type="text" data-bind="value:name" />
    </li>
</ul>

var list=[{name:'Red'，orderNo:0}
，{name:'Green'，订单号：1}
，{名称：'Blue'，订单号：2}]；
函数viewmodel（）{
var self=这个；
self.Items=ko.mapping.fromJS（列表）；
self.ItemToDrag=ko.observable（）；
self.dragItem=函数（项目、事件）{
self.ItemToDrag（item）；
返回true；
}
self.dropItem=函数（项目、事件）{
event.preventDefault（）；
var up=self.ItemToDrag（）.orderNo（）>item.orderNo（）；
self.ItemToDrag（）.orderNo（up？item.orderNo（）-0.5:item.orderNo（）+0.5）；
//订购这张单子
self.Items.sort（函数（左、右）{
返回left.orderNo（）==right.orderNo（）？0:（left.orderNo（）

我的问题是，当列表中的项目通过UI更改顺序时，是否可以使用Knockout自动更改订单字段的内容。 差不多

<ul data-bind="foreach:Items,orderKey:orderNo"></ul>

---

其中orderKey表示项目的顺序，以及在订单更改时要更新的字段。

我不确定这正是您需要的。这是自定义绑定，它在以下绑定之前对

foreach

绑定中的数组进行排序：

ko.bindingHandlers.foreach[“在”]=“orderKey”]；
ko.bindingHandlers.orderKey={
更新：函数（el、valueAccessor、allBindingsAccessor、viewModel）{
var key=ko.unwrap（valueAccessor（））；
var allBindings=allBindingsAccessor（）；
if（所有绑定中的“foreach”）{
var array=ko.unwrap（allBindings.foreach）；
sort（函数（a，b）{返回a[key]>b[key]；}）；
allBindings.foreach=数组；
}                    
}
};
//模型
var模型={Items:ko.observableArray（[{text:3}，{text:1}，{text:2}]）；
//申请
ko.应用绑定（模型）；
//这将模拟可见光的变化
setTimeout（function（）{model.Items.push（{text:0}}），1000）



我不确定这正是您需要的。这是自定义绑定，它在以下绑定之前对
foreach
绑定中的数组进行排序：


ko.bindingHandlers.foreach[“在”]=“orderKey”]；
ko.bindingHandlers.orderKey={
更新：函数（el、valueAccessor、allBindingsAccessor、viewModel）{
var key=ko.unwrap（valueAccessor（））；
var allBindings=allBindingsAccessor（）；
if（所有绑定中的“foreach”）{
var array=ko.unwrap（allBindings.foreach）；
sort（函数（a，b）{返回a[key]>b[key]；}）；
allBindings.foreach=数组；
}                    
}
};
//模型
var模型={Items:ko.observableArray（[{text:3}，{text:1}，{text:2}]）；
//申请
ko.应用绑定（模型）；
//这将模拟可见光的变化
setTimeout（function（）{model.Items.push（{text:0}}），1000）



否，该用例没有特定的绑定。然而，在knockout中，编写自定义绑定很简单。看见在我工作的公司里，我们使用了一个基于淘汰的框架（由我们开发）和大量定制绑定，其中一些非常复杂

我刚刚开始为您的用例创建这样的绑定。但我意识到，除非你有几十张这样的清单，否则它就不符合目的

但是，您可以做的是将实际的排序放入一个数组中，然后在drop函数中更新排序索引。请参阅下面的示例，如果有什么不清楚的地方，请毫不犹豫地询问


var list=[{name:'Red'，orderNo:0}
，{name:'Green'，订单号：1}
，{名称：'Blue'，订单号：2}]；
函数viewmodel（）{
var self=这个；
self._items=ko.mapping.fromJS（列表）；
self.Items=ko.pureComputed（函数（）{
返回self.\u items（）.sort（函数（a，b）{
返回a.orderNo（）item.orderNo（）；
self.ItemToDrag（）.orderNo（up？item.orderNo（）-0.5:item.orderNo（）+0.5）；
}
}
var-vm；
$（文档）.ready（函数（）{
vm=新的viewmodel（）；
ko.applyBindings（vm，$（“#包装器”）[0]）；
});




否，该用例没有特定的绑定。然而，在knockout中，编写自定义绑定很简单。看见在我工作的公司里，我们使用了一个基于淘汰的框架（由我们开发），拥有大量的
<ul data-bind="foreach:Items,orderKey:orderNo"></ul>