如何在按钮单击时更新自定义绑定？

Question

通过单击按钮，我想根据两个选择元素的值更新 d3js 图。如果我理解正确，只需调用 valueAccessor 即可触发更新功能，这在我的代码中没有发生。

我有以下自定义绑定：

ko.bindingHandlers.plotSvg = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        valueAccessor();
        console.log("Update d3js plot");
    }
};

还有观点：

    <div class="panel-body">
        <div class="row">
            <div class="col-xs-2">
                <select class="form-control"
                        data-bind="options: $root.options,
                                           optionsText: 'name',
                                           value: firstSelectedOption">
                </select>
            </div>
            <div class="col-xs-2">
                <select class="form-control"
                        data-bind="options: $root.options,
                                           optionsText: 'name',
                                           value: secondSelectedOption">
                </select>
            </div>
            <div class="col-xs-2 col-xs-offset-5">
                <button class="btn btn-primary" data-bind="click: updatePlot">
                    Visualise
                </button>
            </div>
        </div>
        <div data-bind="plotSvg: updatePlot"></div>
    </div>

updatePlot 是视图模型中的一个函数，它所做的只是在此刻打印一个值。

编辑 javascript：http://pastebin.com/2qKLf6yf 观点：http://pastebin.com/TPvmKgxL

Answer 1

<div data-bind="plotSvg: updatePlot"></div> 需要引用一个计算值，否则敲除将不知道某些东西的值何时发生了变化，因此永远不会触发自定义绑定的更新方法。

我会推荐类似的东西：

<div data-bind="plotSvg: selectedValue"></div>

和

ko.bindingHandlers.plotSvg = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        viewModel.redrawPlot();
        console.log("Update d3js plot");
    }
};

其中selectedValue 是一个计算，它跟踪表单上当前选定的值，并在单击按钮时更新。

由于您使用两个值，您可以在 viewModel 中执行类似的操作来触发可观察到的更改：

this.selectedValue = ko.observable(null);
this.updatePlot = function(){
    this.selectedValue(this.firstSelectedOption()+""+this.secondSelectedOption()+"")
}

这样做将确保每次选项之一更改时它都是唯一的字符串。如果两者都没有改变，那么 observable 不会改变，并且情节不应该重绘。它的蛮力，但它应该适用于您的设置。

Answer 2

当您调用valueAccessor() 时，您只会得到访问器的值，所以要调用函数试试这个：valueAccessor()()。

• valueAccessor — 一个 JavaScript 函数，您可以调用它来获取此绑定中涉及的当前模型属性。在不传递任何参数的情况下调用它（即调用 valueAccessor()）以获取当前模型属性值。要轻松接受可观察值和普通值，请在返回值上调用 ko.unwrap。

参考。 http://knockoutjs.com/documentation/custom-bindings.html