javascript - 消除 knockout 中 Bootstrap 开关状态变化的歧义

Question

我正在使用bootstrap-switch以及此 question 引用的 knockout 绑定(bind)处理程序如下图所示:

ko.bindingHandlers.bootstrapSwitchOn = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    $elem = $(element);
    $elem.bootstrapSwitch();
    // Set intial state
    $elem.bootstrapSwitch('setState', ko.utils.unwrapObservable(valueAccessor()));
    $elem.on('switch-change', function (e, data) {
        // Update the model when changed.
        valueAccessor()(data.value);
    }); 
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var vStatus = $(element).bootstrapSwitch('status');
    var vmStatus = ko.utils.unwrapObservable(valueAccessor());
    if (vStatus != vmStatus) {
        $(element).bootstrapSwitch('setState', vmStatus);
    }
}
};

这似乎工作得很好，我模拟了一个 fiddle 来说明我如何在这里使用它:

http://jsfiddle.net/swervo/of0q42j0/5/

但是，我有一些问题似乎无法以令人满意的方式解决:

1) 如果我在 ko.observable 数组中有一个项目数组，我可以在所有项目上放置一个点击处理程序，并让它们在父 View 模型中调用一个函数，如下所示:

data-bind="click: $parent.clickHandler"

当调用时，它会通过项目自己的 View 模型。这对于获取被单击的项目的属性(例如 id)非常方便。我在上面的 fiddle 中放置了一个按钮来说明这是多么容易做到。

但是，如果我使用 Bootstrap 开关而不是简单的按钮，则开关似乎不知道它的父级，并且我找不到一种优雅的方式来传递包含开关到其父级的 View 模型父级 - 就像您可以使用按钮一样。我尝试为数组中的每个项目提供对其父 View 模型的引用，这确实有效，但会创建循环引用，因此看起来不是正确的方法。

2) 在我正在构建的应用程序中，列表中项目的状态可以在不同的客户端上更改 - 并且本地状态需要更新以反射(reflect)这些远程客户端。同样，状态也可以在本地客户端上更改，然后传播到其他客户端。我的问题是如何区分本地发生的状态更改(即，由于用户单击开关)和远程发生的状态更改(即，由于来自服务器的更新)。在我的实际项目中，我使用 knockout 订阅来监听链接到开关的值的变化，如下所示:

viewModel.observableValue.subscribe(function(newValue) {
    // test value on server and if it is different update
});

我希望避免从服务器接收更新，然后当我的交换机更改以反射(reflect)新状态时再次更新服务器(具有相同的状态)。目前，我通过在发送更新之前测试服务器状态(如上面的代码片段所暗示)来修复此问题，如果它与挂起状态更新相同，我将丢弃它。 (我使用上面引用的 fiddle 中的按钮模拟了服务器更新)。

我对这些问题的解决方案都感觉不优雅，因此这里有这个问题。任何帮助将不胜感激。

Answer 1

1. 我不确定你所说的“交换机似乎不知道它的父交换机”是什么意思。正在查看http://knockoutjs.com/documentation/custom-bindings.html ，我可以看到init和update两者都有第五个参数，bindingContext如果您希望访问它，则包含父级信息。
2. 咳咳，我们过去从事的一个项目有一个切换按钮也遇到了同样的问题，并且通过一种非常简单的方法修复了它。对于本地生成的事件，只需将属性附加到对象，例如 .local = true;并在更新中检查它(或将其附加到 REST 处理程序中)以区分本地/与 REST。不过，不要忘记在更新完成后从 View 模型中删除该属性。