Question

我有一个可观察的项目数组，使用Knockout可排序插件使其可拖动/可拖放。我可以使用以下代码按doc对元素应用自定义模板绑定。

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

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

对于可以在ko中使用foreach循环遍历的数组，我能够实现相同的功能，但是由于不允许使用foreach，因此无法对可排序数组执行相同的操作。有人可以建议一个解决方案/解决方法吗？

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

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

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

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>

我们可以简单地避免使用条件if绑定，而不是使用条件容器css。

工作小提琴 here

css上的文档 here

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

sortable和模板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可排序）

2 个答案: