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是viewmodel中的一个函数，它所做的只是打印一个值。

修改 javascript：http://pastebin.com/2qKLf6yf 视图：http://pastebin.com/TPvmKgxL

Answer 1

<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()+"")
}

这样做会确保每次其中一个选项发生变化时都会有一个唯一的字符串。如果两者都没有改变，那么可观察量就不会改变，并且情节不应该重绘。它的蛮力，但它应该与你设置的一起工作。

Answer 2

当您致电valueAccessor()时，您只需获取访问者的值，因此要调用该函数，请尝试以下操作：valueAccessor()()。

valueAccessor - 可以调用以获取此绑定中涉及的当前模型属性的JavaScript函数。调用此方法而不传递任何参数（即调用valueAccessor（））以获取当前模型属性值。要轻松接受observable和plain值，请在返回值上调用ko.unwrap。


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

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

2 个答案: