javascript - 更改顺序时 knockout Foreach 重复

Question

这是我的 HTML 的伪代码

foreach: thing
 ifnot: thing.disabled
  <div>Enabled</div>
  put enabled thing.stuff here
  //this is a ko.observable(bool), and moves "this"thing to the other div
  click: thing.toggleDisabled()


foreach: thing
 if: thing.disabled
  <div>Disabled</div>
  put disabled thing.stuff here
  //this is a ko.observable(bool), and moves "this"thing to the other div
  click: thing.toggleDisabled()

我有一个来 self 们 API 的大型嵌套对象。我对这个对象进行了两次 foreach 操作。第一次，我检查属性是否为假。如果是这样，则已启用。将其放在顶部 div 中。如果为 true，则该对象被禁用，将其放在底部 div 中。

            <!--ko foreach: {data: $root.list.listObj.rows, as: 'row'}-->
            <!--ko ifnot: row.disabled-->
            <div class="row single-row  list-group-item">
                <div class="col-md-6">
                    <p data-bind="text: row.rule"></p>
                </div>

                <div class="col-md-6">
                    <span data-bind="click: function(){$root.list.enableCriteria(row)}">Disable</span>
                </div>

            </div>
            <!--/ko-->
            <!--/ko-->

  self.enableCriteria = function (row) {

       row.disabled(!row.disabled());
    };

您看到的函数只是切换“disabled”属性的值。所有这些都运行良好。

问题如下:我的 UI 使用单击并拖动“可排序”样式功能，通过允许用户单击并拖动来重新排列这些元素的顺序。 Knockout 为要迭代的每个对象创建“foreach”绑定(bind)到的元素。当一个元素被拖动到另一个元素的上方或下方时，它会添加到一个对象的“foreach 元素”之间，但现在有两个对象。当值从 true 切换到 false 时，由于一个“foreach 元素”中现在有两个对象，因此顶部元素保留，而它的副本向下移动到另一个 div，本质上是复制它。

以下是 Chrome 浏览器工具渲染 html 的一部分。

<!--ko foreach: {data: $root.list.listObj.rows, as: 'row'}-->
            <!--ko ifnot: row.disabled-->
            <div class="row single-row  list-group-item">
                <div class="col-md-6">
                    <p data-bind="text: row.rule">Phone:</p>
                </div>

                <div class="col-md-6">
                    <span data-bind="click: $root.list.enableCriteria(row)">Disable</span>
                </div>

            </div>
            <!--/ko-->

            <!--ko ifnot: row.disabled-->
            <div class="row single-row  list-group-item">
                <div class="col-md-6">
                    <p data-bind="text: row.rule"> Address:</p>
                </div>

                <div class="col-md-6">
                    <span data-bind="click: $root.list.enableCriteria(row)">Disable</span>
                </div>

            </div>
            <!--/ko-->

这是移动其中一个 .col-md-6 div 后的样子(请注意，其中一个循环注释没有内容，另一个循环注释中包含两个元素):

<!--ko foreach: {data: $root.list.listObj.rows, as: 'row'}-->
            <!--ko ifnot: row.disabled-->
            <!--/ko-->

            <!--ko ifnot: row.disabled-->
            <div class="row single-row  list-group-item">
                <div class="col-md-6">
                    <p data-bind="text: row.rule"> Address:</p>
                </div>

                <div class="col-md-6">
                    <span data-bind="click: $root.list.enableCriteria(row)">Disable</span>
                </div>

            </div>
            <div class="row single-row  list-group-item">
                <div class="col-md-6">
                    <p data-bind="text: row.rule">Phone:</p>
                </div>

            <!--/ko-->

电话现已移至地址下方，但位于其他部分内。当我现在切换该值时，它将在另一个“禁用”或“启用”div 中创建一个新元素。

问题:有什么方法可以使循环元素/组件/与该元素中的 div 关联的内容与我的可排序一起使用吗？可观察者是否有解决方法可以使这项工作更好？有什么办法解决这个问题吗？

使用 foreach 元素而不是注释会破坏我的可排序。有什么帮助吗？

Answer 1

花了凌晨 1 点(我发布这篇文章后又花了 4 个小时)和今天早上 2 个小时，我想出了一个漂亮的解决办法。

在 KO 中，如果您使用带注释的 if 或 ifnot 语句，则仅当可观察值位于 if 或 ifnot 注释内时才会对可观察值进行求值，即使如此，似乎也仅在其所属的 if 或 ifnot 注释内进行求值。循环进展顺利，但将 if 语句放在 div 元素上意味着该 div 正在被打乱和重新排列，因此永远不会有任何重复。

要点，如果您需要进行任何类型的 dom 改组或重新排列，请将 if 和 ifnot 设置为实际元素而不是注释语法。

感谢您的建议!