基于条件的可排序元素上的自定义模板绑定（Knockout.js 可排序）答案

【问题标题】：Custom template binding on sortable elements based on condition (Knockout.js Sortable)基于条件的可排序元素上的自定义模板绑定（Knockout.js 可排序）
【发布时间】：2015-08-11 20:51:01
【问题描述】：

我有一个可观察的项目数组，这些项目使用 Knockout 可排序插件可拖放/可拖放。我可以根据doc 使用以下代码在元素上应用自定义模板绑定。

<div style="border-width:0;" data-bind="sortable: {template: 'customTemplate', data: observableArray}">

我的要求是根据应用于项目属性的特定条件为数组中的不同项目使用不同的模板。例如，如果我们对可观察数组中的每个项目都有一个名为“status”的属性，如果状态为真，我想绑定“template1”，否则为“template2”。

对于可以在 ko 中使用 foreach 循环遍历的数组，我可以实现相同的效果，但对于可排序数组，我无法做到这一点，因为它不允许使用 foreach。有人可以提出相同的解决方案/解决方法吗？

更新：我能够根据条件在同一个模板中应用自定义绑定，但这会导致一个奇怪的错误，即元素在将其拖放到目标容器中时被克隆到父容器中。 Demo可以看这里：jsFiddle

我根据姓名对学生应用了不同的样式，但是在将学生放到表中时，它也会被克隆到父表中。可能是什么问题？

注意：我不想将条件 css 绑定到我的元素，我想根据条件区分元素呈现的方式。示例 - 以座位示例为例，如果我有学生对象的属性名称、年龄和班级，我只想显示少数学生的姓名，而某些学生的所有 3 个属性可以在示例小提琴中看到。

【问题讨论】：

如果您需要使用两个模板，您可以在单独的模板代码  //code  和  //code  上尝试此操作。欢呼
类似 jsfiddle.net/supercool/jyFTX/5 的东西。欢呼
感谢您的回复@supercool。甚至我之前也尝试通过在同一个模板中应用条件 HTML 来做同样的事情。它工作得很好，但奇怪的是，当我将元素拖放到容器中时，它也会在父容器中创建一个副本，而不是简单地将项目移动到目标容器。
哦，我知道你能做一个小提琴来重现你的问题。所以很容易弄清楚为什么。
嗨@supercool，用小提琴编辑了答案。

标签： jquery-ui knockout.js knockout-sortable

【解决方案1】：

我们可以使用条件css 绑定来解决问题

查看：

<script type="text/html" id="customTmpl">
        <div  data-bind="css:{'one': name() === 'Bobby' ? true : false ,'two': name() != 'Bobby' ? true : false } ">
            <p data-bind="text: name"></p>
        </div>
</script>

我们可以简单地避免它并使用有条件的css 绑定来代替有条件的无容器if。

工作提琴手here

css 上的文档可用here

【讨论】：

谢谢@supercool。但这并不能解决我的问题，因为我不仅想更改 div 的 css，还想更改 div 的内部元素。例如，如果我有学生的属性名称和年龄，我想显示一些学生的姓名和年龄，并且只显示一些学生的姓名，因为你可以在更新的小提琴中结帐。
你应该这样做，它工作正常jsfiddle.net/supercool/UdXr4/816。干杯
感谢@supercool，它工作正常。我也找到了另一种方法来完成这项工作。所需要做的就是将可排序元素 div 和模板 div 分开，如下图所示：jsfiddle.net/UdXr4/817
只是一个建议，避免条件和额外的 html 总是更好。

【解决方案2】：

我终于能够通过在单个模板中添加条件剔除代码并将模板 div 与可排序 div 分开来使其工作，如小提琴 here 所示。

条件脚本如下：

<script type="text/html" id="customTmpl">
 <!-- ko if: name() == 'Bobby' -->
    <div style="background-color: red; margin:4px;">
        <p data-bind="text: name"></p>
        <p data-bind="text: gender"></p>
    </div>
<!-- /ko -->
<!-- ko if:name() != 'Bobby' -->
    <div style="background-color: yellow; margin:4px;">
        <p data-bind="text: name"></p>
    </div>
<!-- /ko -->

可排序和模板 div 被分隔为：

<div class="seats" data-bind="sortable: {data: students, allowDrop: $root.isTableFull }">
        <div style="padding:0; border-width:0" data-bind="template:'customTmpl'"></div>
    </div>

希望对你有帮助:)

【讨论】：