jsrender使用已選擇的選項填充選擇框多個

Question

我想通過Jsrender填充選擇框。

該代碼正確填充選擇框，但我無法在默認情況下選擇少量值。我爲此創建了一個Jsrender輔助函數，但我認爲其他值在循環內部是不可訪問的，所以這就是函數無法正常工作的原因。

這裏是鏈接到jsfiddle

我的HTML是

<div class="select_placeholder"></div> 
<script id="selectbox" type="text/x-jsrender"> 
<select multiple="multiple" name=""> 
{{for cats }} 
{{include tmpl="#selectbox_options"/}} 
{{/for}} 
</select> 
</script> 
<script id="selectbox_options" type="text/x-jsrender" > 
    <option value="{{:term_id}}" {{>~selected(term_id, selected)}} >{{:name}}</option> 
</script> 

，我的JavaScript是

$.views.helpers({ 

     selected: function(needle,haystack) { 
      console.log(haystack); 
      if(typeof haystack === "undefined" || haystack === null) { 
       return; 
      } 
      var count=haystack.length; 
      for(var i=0;i<count;i++){ 
       if(haystack[i]===needle){return 'selected="selected"'; } 
      } 
      return; 
     } 
    }); 
var cates = [ 
     {'term_id' : 1, 'name' : 'category 1'}, 
     {'term_id' : 2, 'name' : 'category 2'}, 
     {'term_id' : 3, 'name' : 'category 3'}, 
     {'term_id' : 4, 'name' : 'category 4'}, 
     {'term_id' : 5, 'name' : 'category 5'}, 

    ]; 
    var selected = [{'term_id' : 3}, {'term_id' : 4}]; 
    $(".select_placeholder").html(
     $("#selectbox").render({cats : cates,selected:selected}) 
    ); 

Answer 1

嘗試數據視圖https://jsfiddle.net/fksj52c6/5/

var cates = [ 
     {'term_id' : 1, 'name' : 'category 1'}, 
     {'term_id' : 2, 'name' : 'category 2'}, 
     {'term_id' : 3, 'name' : 'category 3'}, 
     {'term_id' : 4, 'name' : 'category 4'}, 
     {'term_id' : 5, 'name' : 'category 5'}, 

    ]; 
    var selected = [{'term_id' : 3}, {'term_id' : 4}]; 

    for(var i = 0; i< selected.length; i++) { 
     for(var j = 0; j < cates.length; j++) 
       if(selected[i].term_id === cats[j].term_id) { 
      cats[j].selected = true; 
     } 
    } 
$(".select_placeholder").html(
       $("#selectbox").render({cats : cates}) 
      ); 

結合

HTML

<div class="select_placeholder"></div> 
<script id="selectbox" type="text/x-jsrender"> 
<select multiple="multiple" name=""> 
{{for cats }} 
<option value="{{:term_id}}" {{if selected}}selected="selected"{{/if}} >{{:name}}</option> 
{{/for}} 
</select> 
</script>