JSViews 计算链接到 <select> 的可观察对象未使用 .set() 更新

Question

我正在尝试 link 一个 <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

您实际上并没有 data-link select 到计算的可观察值。对于 two-way 绑定，当用户更改 drop-down selection 时，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 的下一次更新中，事情将得到简化，您将不需要 data-link 到 selected{:~root.computedSelectedOption()==#data}" 选项。 select <select data-link="computedSelectedOption()"> 上的 data-link 就足够了。

JSViews 计算链接到 <select> 的可观察对象未使用 .set() 更新

JSViews computed observable linked to <select> not updating with .set()

computed-observable

jsviews