Javascript 使用按钮删除模板绑定

我正在学习淘汰赛，我遇到了这个例子

HTML/View:

未排序


分类

JavaScript/ViewModel:

函数实例（id、名称）{
返回{
id:ko.可观察（id），
名字：ko.observable（名字）
};
}
var viewModel={
实例：ko.array([
新实例（1，“Zed”），
新实例（2，“Jane”），
新实例（3，“John”），
新实例（4，“安妮”），
新实例（5，“Ted”）
])
};
viewModel.sortFunction=函数（a，b）{
返回a.FirstName（）.toLowerCase（）>b.FirstName（）.toLowerCase（）？1:-1；
};
viewModel.sortedInstances=ko.DependentToServable（函数（）{
返回this.instances.slice（）.sort（this.sort函数）；
}，视图模型）；
应用绑定（视图模型）；

我尝试通过添加按钮进行更改，并希望使用该按钮单击对未排序的项目进行排序。像

排序

---

没用。任何人都可以解释如何将模板绑定到按钮单击吗？

您可以通过在viewmodel中添加一个

排序

函数来完成此操作，该函数对可观察数组的内容进行排序，然后用新的排序数组更新可观察数组：

var viewModel = {
    instances: ko.observableArray([
    new Instance(1, "Zed"),
    new Instance(2, "Jane"),
    new Instance(3, "John"),
    new Instance(4, "Anne"),
    new Instance(5, "Ted")])
};

viewModel.sort = function () {
    var unsorted = viewModel.instances();

    viewModel.instances(unsorted.sort(viewModel.sortFunction));
};

viewModel.sortFunction = function (a, b) {
    return a.FirstName().toLowerCase() > b.FirstName().toLowerCase() ? 1 : -1;
};

然后，您可以创建一个按钮，在单击时对数组进行排序：

<button data-bind="click: sort">Sort</button>

排序

示例：