根据条件对可排序元素进行自定义模板绑定（Knockout.js 可排序）

Question

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

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

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

我能够对可以在 ko 中使用 foreach 循环遍历的数组实现相同的效果，但无法对 sortable 数组实现相同的效果，因为它不允许使用 foreach。有人可以建议 solution/workaround 吗？

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

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

注意：我不想将条件 css 绑定到我的元素，我想根据条件区分元素呈现的方式。示例 - 按照 table 座位示例，如果我有属性名称、年龄和 class 用于学生对象，我只想显示少数学生的姓名，而一些学生的所有 3 个属性都可以在中看到示例 fiddle.

Answer 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

Answer 2

我终于能够通过在单个模板中添加条件淘汰代码并将模板 div 与可排序的 div 分开来使其工作，如 fiddle 中所示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>

希望对您有所帮助:)

根据条件对可排序元素进行自定义模板绑定（Knockout.js 可排序）

Custom template binding on sortable elements based on condition (Knockout.js Sortable)

jquery-ui

knockout.js

knockout-sortable