Knockout.js 将项目从一个可观察数组添加到另一个可观察数组会导致回发上无法移动的项目

Knockout.js 将项目从一个可观察数组添加到另一个可观察数组会导致回发上无法移动的项目,knockout.js,Knockout.js,我有一个例子来大致说明我在应用程序代码中所经历的情况。(为了子孙后代,我将在下面发布实际的fiddle代码。) 本质上,我有一个可观察的数组,用于填充复选框选项列表。选择其中一个选项将该项添加到仅由选定项组成的另一个可观察数组中 如果表单中有一些错误(或者我假设您正在编辑现有数据),则从一开始就使用先前选择的项填充所选的可观察数组。但是,现在,原始项和选定项之间没有连接,因此选中或取消选中其中一个复选框将添加一个重复项,并仅删除该重复项 我的问题是1)我是否完全错了(即,是否有更好的方法来执行此

我有一个例子来大致说明我在应用程序代码中所经历的情况。(为了子孙后代,我将在下面发布实际的fiddle代码。)

本质上,我有一个可观察的数组,用于填充复选框选项列表。选择其中一个选项将该项添加到仅由选定项组成的另一个可观察数组中

如果表单中有一些错误(或者我假设您正在编辑现有数据),则从一开始就使用先前选择的项填充所选的可观察数组。但是,现在,原始项和选定项之间没有连接,因此选中或取消选中其中一个复选框将添加一个重复项,并仅删除该重复项

我的问题是1)我是否完全错了(即,是否有更好的方法来执行此操作而不会导致此问题)和2)如果没有,恢复项目之间的连接的最佳方法是什么,以便复选框将指示项目存在,并且取消选中它们将删除该项目

HTML

<ul data-bind="foreach: Fruit">
    <li>
        <label>
            <input type="checkbox" class="cbFruit" data-bind="checked: Selected, attr: { value: Name }" />
            <span data-bind="text: Name"></span>
        </label>
    </li>
</ul>

<ul data-bind="foreach: SelectedFruit">
    <li data-bind="text: Name"></li>
</ul>
<ul data-bind="foreach: Fruit">
    <li>
        <label>
            <input type="checkbox" class="cbFruit" data-bind="checked: Selected, attr: { value: Name }" />
            <span data-bind="text: Name"></span>
        </label>
    </li>
</ul>

<ul data-bind="foreach: Fruit">
    <!-- ko if: Selected -->
    <li data-bind="text: Name"></li>
    <!-- /ko -->
</ul>

我通过简单地扔掉单独的可观察数组(和单独的发布列表)解决了这个问题。相反,我对
foreach
使用了相同的完整列表,在第二个列表中,我使用了一个剔除虚拟
if
元素,让它只显示所选的元素:

HTML

<ul data-bind="foreach: Fruit">
    <li>
        <label>
            <input type="checkbox" class="cbFruit" data-bind="checked: Selected, attr: { value: Name }" />
            <span data-bind="text: Name"></span>
        </label>
    </li>
</ul>

<ul data-bind="foreach: SelectedFruit">
    <li data-bind="text: Name"></li>
</ul>
<ul data-bind="foreach: Fruit">
    <li>
        <label>
            <input type="checkbox" class="cbFruit" data-bind="checked: Selected, attr: { value: Name }" />
            <span data-bind="text: Name"></span>
        </label>
    </li>
</ul>

<ul data-bind="foreach: Fruit">
    <!-- ko if: Selected -->
    <li data-bind="text: Name"></li>
    <!-- /ko -->
</ul>

第二个列表中的数据与第一个列表中的数据一致,因此我必须在服务器端进行一些清理,以确保在再次显示视图时,仅返回内容值(水果名称等)。

您是否结合多选列表查看了?(这不是对你的问题的完全回答,在某种程度上仍然是相关的。)我会使用
Selected
属性来跟踪初始选择,并将
SelectedFruit
更改为计算的。。。