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進行數據鏈接。對於雙向綁定，它是在用戶更改下拉選擇時調用setter的select上的綁定。

<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()">上的數據鏈接即可。