Question

我使用knockout.js（v.3.2.0）在页面上创建一系列复选框列表。对于任何给定的列表，我希望选中的项目移动到列表的顶部，并在未选中时移动到选中的项目下方。

起初我以为我可以使用js函数重新排序列表然后在ko.applyBindings之后调用该函数，这显然是同步的（在applyBindingds之前调用它不会因为DOM不完整而工作然而）。然而，它没有奏效。任何想法如何在视图模型中编写一个函数来执行此操作？

这是我的标记：

<ul data-bind="foreach: targetingViewModel.filteredTargetingInstances('assets')">
    <li>
        <label>
            <input type="checkbox" data-bind="checked:selected"/>
            <span data-bind="text: value"></span>
        </label>
    </li>
</ul>

这是我在另一个Stack Overflow答案中找到的jQuery函数：

addSelectionsToList = function () {
var $list = $(".target-list");
sortItems($list);
function sortItems(list){
    var origOrder = list.children();
    list.on("click", ":checkbox", function() {
        var i,
            checked = document.createDocumentFragment(),
            unchecked = document.createDocumentFragment();
        for (i = 0; i < origOrder.length; i++) {
            if (origOrder[i].getElementsByTagName("input")[0].checked) {
                checked.appendChild(origOrder[i]);
            } else {
                unchecked.appendChild(origOrder[i]);
            }
        }
        list.append(checked).append(unchecked);
    });
}
};

感谢。

Answer 1

查看以下代码段。希望这对你有帮助。

我已执行的步骤

创建了一个带有类Item的viewmodel，其中subscribe的更改为 isChecked属性。
有Obsservable列表项数组将包含isChecked属性。
最后改变价值吧将通过选择任何项目中的更改值来调用排序。

＆＃13;

 function SomeViewModel() {
        var self = this;
        self.chkLists = ko.observableArray([]);

        function Item(isChecked, name) {
            this.isChecked = ko.observable(isChecked);
            this.name = ko.observable(name);

            this.isChecked.subscribe(function (newValue) {
                self.chkLists.sort(function (l) { return l.isChecked() === false });
            })

        }
         self.chkLists = ko.observableArray([
             new Item(false, "Bear"),
             new Item(false, "Hippo"),
             new Item(false, "Lion"),
             new Item(false, "Tiger"),
             new Item ( false, "Zebra" )
        ]);
    }

 $(document).ready(function () {
        var divEle = $("#sortedList")[0];
        ko.applyBindings(SomeViewModel, divEle);
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="sortedList">
    <ul data-bind="foreach: chkLists">
        <li>
            <label>
                <input type="checkbox" data-bind="checked: $data.isChecked" />
                <span data-bind="text: $data.name"></span>
            </label>
        </li>
    </ul>
</div>

＆＃13;

Knockout.js：将选中的项目移到列表顶部

1 个答案: