Jquery ui 基于条件对可排序元素进行自定义模板绑定（Knockout.js sortable）

我有一个可观察的项目数组，可以使用Knockout sortable插件进行拖放。我能够使用下面的一段代码在元素上应用自定义模板绑定

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

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

对于可以在ko中使用foreach循环遍历的数组，我能够实现相同的功能，但是对于可排序数组，我无法实现相同的功能，因为它不允许使用foreach。是否有人能提出解决方案/解决方法

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

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

---

注意：我不想将条件css绑定到我的元素，我想根据条件区分元素的渲染方式。示例-以桌子座位为例，如果我有students对象的属性name、age和class，我只想为少数学生显示名称，而在示例fiddle中可以看到一些学生的所有3个属性。

我们可以使用条件

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

绑定

工作小提琴手

---

关于

css

可用的文档

我终于能够通过在单个模板中添加条件剔除代码并将模板div与可排序div分离来实现它，如fiddle中所示

条件脚本编写如下：

<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>

---

希望它有帮助：）

如果您需要使用两个模板，您可以在单个模板上尝试此操作代码

//code

&

//code

。像这样的事干杯。干杯谢谢你的回复@supercool。甚至我之前也尝试过在同一个模板中应用条件HTML。它工作得很好，但奇怪的是，当我将元素拖放到容器中时，它也会在父容器中创建一个副本，而不是简单地将项目移动到目标容器。哦，我明白了，你能做一个小提琴来重现你的问题吗。所以很容易理解原因。嗨@supercool，用小提琴编辑了答案。谢谢@supercool。但这并不能解决我的问题，因为我不仅想更改div的css，还想更改div的内部元素。例如，如果我有学生的姓名和年龄属性，我想显示一些学生的姓名和年龄，并且只显示一些学生的姓名，因为您可以在更新的fiddle中签出。您应该这样做，效果很好。干杯谢谢@supercool，很好用。我也找到了另一种方法来实现这一点。所需要做的只是分离可排序元素div和模板div，正如在这里的小提琴中所看到的：只是一个建议，最好避免条件和额外的html。