JSViews 计算的 observable 链接到 <select> 不使用 .set() 更新

Question

我正在尝试将<select> 框链接到 JSViews 中计算的可观察对象。 <select> 在依赖变量更改时更新良好。但是，当在<select> 框中选择一个新值时，它不会触发我定义的 set() 函数。见https://jsfiddle.net/4y274h0L/3/

模板

<select>
    {{for options}}
        <option value="{{:#data}}" data-link="{:#data} selected{:~root.computedSelectedOption() == #data}"></option>
    {{/for}}
</select>

计算可观测

function privateComputedOption() {
    return vm.tempSelectedOption;
}

privateComputedOption.depends = ["~root.tempSelectedOption"];

privateComputedOption.set = function(val) {
    $.observable(vm).setProperty("tempSelectedOption", val);
    console.log(val);
};

非常欢迎任何帮助！

Answer 1

您实际上并没有将 select 数据链接到计算的 observable。对于双向绑定，当用户更改下拉选择时，select 上的绑定将调用 setter。

<select data-link="computedSelectedOption()">
  {{for options}}
    <option value="{{:#data}}"
     data-link="{:#data} selected{:~root.computedSelectedOption()==#data}">  
    </option>
  {{/for}}
</select>

{^{:computedSelectedOption()}}

我更新了上面的jsfiddle：

https://jsfiddle.net/4y274h0L/4/

参见例如http://www.jsviews.com/#samples/form-els/array-binding。

顺便说一句，在 JsViews 的下一次更新中，事情将被简化，您不需要在选项上将数据链接到 selected{:~root.computedSelectedOption()==#data}"。只需选择 <select data-link="computedSelectedOption()"> 上的数据链接就足够了。