Javascript 在一次更改多个观察值时提高淘汰性能

如果您对提供的JSFIDLE中的“单击”事件有任何性能建议，我将不胜感激

这样做的目的是在一次改变多个观测值时提高性能

我找不到任何关于以批处理方式暂停和恢复更新通知的文档

$（“#全部”）。单击（函数（）{
var tasks=ko.dataFor（$（“#tasks”）[0]）.tasks（），
checked=this.checked；
//TODO:性能？批量更改？
对于（var i=0，l=tasks.length；i来说，通常最好专注于有效的优雅解决方案，并且只在出现性能问题时进行优化，或者至少合理地预期特定代码段会成为瓶颈

本着这种精神，我编写了一个解决方案，使All复选框更具响应性：

如果选中所有任务框，则将选中所有
如果选中“全部”且未选中任务框，则将取消选中“全部”
选中全部将导致选中所有任务框
取消选中全部将导致取消选中所有任务框
没有点击事件处理，也没有使用jQuery。虽然每次值更改时都会运行任务项，但我认为您可能有100个任务框，并且没有明显的性能问题


var viewModel=ko.mapping.fromJS({
任务：[{
名称：“任务1”，
完成：错误
},{
名称：“任务2”，
完成：对
},{
名称：“任务3”，
完成：错误
}]
});
viewModel.allChecked=ko.computed({
读：函数（）{
var tasks=viewModel.tasks（）；
对于（var i=0；i您可以更改模型来跟踪已检查任务的集合，而不是直接指示已检查的任务。由于只更新一个可观察到的任务，因此它应该使实现更容易、更快。只需创建一个（可观察的）数组并将选中的
绑定绑定到数组。还要确保
值已绑定



不相关，但为什么不在此处使用
单击
绑定处理程序？@Retsam-本例恰好如此-可以使用单击绑定-但它是否对我有进一步的帮助？@Stevanicus nice认为很难，但在初始检查/取消检查时会出现轻微的性能问题。请检查控制台此处的时间日志。稍后的请求将不会花费时间，因为订阅将被维护（在您手动执行之前不会被处理）&最初的时间延迟是becoz（要构建的订阅）.干杯你有什么样的性能问题？实际上没有任何性能问题，只是想知道是否有一种方法可以优化它谢谢你的回答。我有每个任务的可观察性，因为这是我从服务器接收数据的方式。因此，尽管我可以像你在applyBindings方法c中所做的那样，在以后更改视图模型总之，我仍然需要将数据以与服务器相同的方式发送回服务器。我认为，如果您在与服务器通信时生成数据，将是一种更好的总体体验。一般来说，模型中的约束和/或依赖性观察值越少，当值发生变化时，重新计算的次数就越少。如果生成了数据，y至少在理论上，你只需在传输数据时支付该费用，而不是在点击时支付。是的，问题是，在这种情况下，它可能是复选框…但在理论上，它可能是完全通用和动态的。在这种情况下，映射的可观察性“完成”可以映射到任何嵌套对象中的任何值，因此我希望尽可能少地接触视图模型。简单地说，获取数据，不管它是什么，显示它，允许某种类型的交互，将它发送回。本质上，您可能是对的，因为这也是Knockout在其示例中建议的方式，不幸的是，它不适合我的情况回答得好，谢谢。正是我想要的
$("#all").click(function(){
    var tasks = ko.dataFor($("#tasks")[0]).tasks(),
        checked = this.checked;

    //TODO: performance? Batch changes?
    for(var i = 0, l = tasks.length; i<l; i++){
         tasks[i].done( !!checked );
    }
});

var data = {
    tasks: [{
        name: "Task 1"
    },{
        name: "Task 2"
    },{
        name: "Task 3"
    }]
};

ko.applyBindings( ko.mapping.fromJS(data, {}, {
    checkedTasks: ko.observableArray([])
}), $("#tasks")[0]);

$("#all").click(function(){
    var model = ko.dataFor($("#tasks")[0]),
        checked = this.checked;

    if (checked) {
        model.checkedTasks(model.tasks().slice(0));
    } else {
        model.checkedTasks([]);
    }
});