JsViews：數據鏈接到<select>的語法是什麼... <option> ...？

var app = { 
 
    selections: { 
 
     things: [ 
 
      { Name: "name1", Value: "thingValue1" }, 
 
      { Name: "name2", Value: "thingValue2" }, 
 
      { Name: "name3", Value: "thingValue3" } 
 
     ], 
 
     places: [ 
 
      { Name: "place1", Value: "placeValue1" }, 
 
      { Name: "place2", Value: "placeValue2" }, 
 
      { Name: "place3", Value: "placeValue3" } 
 
     ] 
 
    }, 
 
    formData: { 
 
     selectedThing: "thingValue1", 
 
     selectedPlace: "placeValue1" 
 
    } 
 
}; 
 

 
var template = $.templates("#theTmpl"); 
 

 
template.link("#content", app);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="http://www.jsviews.com/download/jsviews.js"></script> 
 

 

 
<div id="content"></div> 
 

 
<script id="theTmpl" type="text/x-jsrender"> 
 
    <select id="thingChoice" data-link="formData.selectedThing"> 
 
     <option value="-">Please select</option> 
 
     {^{for selections.things}} 
 
     <option data-link="{value{:Value} text{:Name}} selected{:formData.selectedThing}}"></option> 
 
     {{/for}} 
 
    </select> 
 
    <select id="placeChoice" data-link="formData.selectedPlace"> 
 
     <option value="-">Please select</option> 
 
     {^{for selections.places}} 
 
     <option data-link="{value{:Value} text{:Name}} selected{:formData.selectedPlace}}"></option> 
 
     {{/for}} 
 
    </select> 
 
</script>

在此的jsfiddle，我想我的幾個項目清單從數據結構我將發佈到服務器分開： http://jsfiddle.net/hdra2e2d/1/

這裏的問題是：只第一項在選擇下拉菜單中有文字！儘管我還沒有找到任何超級簡單或簡明的數據綁定到SELECT HTML表單元素的例子，所以我可能錯過了一些東西，當將這種嘗試彎曲成最接近可能的匹配時呢？

背景細節：目的是爲幾個下拉列表提取可用項目作爲JSON，並將它們填充到「app.selections」成員內的離散字典數組中，將數據鏈接到它們並將其用戶選擇值存儲在我將作爲JSON發佈到服務器的「app.formData」對象中。

來源

2015-10-21 Brian Hinckle

我很好奇哪裏你發現了

您的

<option data-link="{value{:Value} text{:Name}} selected{:formData.selectedThing}}"></option>

語法很奇怪。那個是從哪裏來的？您似乎採用了與此問題相同的錯誤語法：jsViews - how do I set selected option from data。

該選項的正確語法是

<option data-link="value{:Value} {:Name} selected{:~selected === Value}"></option>

（如圖中這個問題的答案：https://stackoverflow.com/a/18154317/1054484）

參見這裏的最後一個樣本：http://www.jsviews.com/#jsvplaying

這裏是一個您的jsfiddle的更正版本： http://jsfiddle.net/BorisMoore/8dwdkp2d/。

請注意，此語法將允許您動態更新顯示的Name和Value值;嘗試更改我的jsfiddle版本中的文本框值。

，如果你不需要動態更新Name和Value值的另一種語法是：

<option value="{{:Value}}" selected="{{:~selected === Value}}">{{:Name}}</option>

瞭解爲數據鏈路表達式語法，請參閱http://www.jsviews.com/#linked-elem-syntax

來源

2015-10-22 18:25:30 BorisMoore

感謝您的更正！我必須從最接近我需要的問題中繼承一些錯誤的語法。奇怪的是，在每個選項的數據鏈接設置中將「：」更改爲「^」似乎可行，這是一個更新的jsfiddle： http://jsfiddle.net/hdra2e2d/6/ –

那麼語法是仍然不正確...有關數據鏈接語法如何工作的信息，請參閱http://www.jsviews.com/#linked-elem-syntax ... – BorisMoore

明白了，再次感謝。 - 通過閱讀我對「：」，「〜」和「^」的實際含義感到困惑，它們是否在每個可能使用它們的上下文的某個地方被明確定義？ –

JsViews：數據鏈接到<select>的語法是什麼... <option> ...？

回答

相關問題