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

Question

单击一个按钮，我想根据两个 select 元素的值更新 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是viewmodel中的一个函数，此刻它所做的只是打印一个值。

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

Answer 1

当您调用 valueAccessor() 时，您只是获取访问器的值，所以要调用该函数，请尝试以下操作：valueAccessor()().

valueAccessor — A JavaScript function that you can call to get the current model property that is involved in this binding. Call this without passing any parameters (i.e., call valueAccessor()) to get the current model property value. To easily accept both observable and plain values, call ko.unwrap on the returned value.

Ref. http://knockoutjs.com/documentation/custom-bindings.html

Answer 2

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

我会推荐这样的东西：

<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 就不会改变，并且情节不应该重绘。它的蛮力，但它应该适用于您的设置。

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

How to update custom binding on button click?

custom-binding

knockout.js