如何使用jsRender創建一個選擇列表？

我使用jsRender，並希望建立一個<select>標籤列出號碼1至10如何使用jsRender創建一個選擇列表？

我得到我想從模式選擇指數。

即創建這樣一個下拉菜單：

<select name="sets"> 
      <option value="1">1</option> 
      <option value="2" selected="selected">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="6">6</option> 
      <option value="7">7</option> 
      <option value="8">8</option> 
      <option value="9">9</option> 
      <option value="10">10</option> 
</select>

在機型有數字「2」 - 所以它不得不進行選擇。

這怎麼能用jsRender來實現？

我的模型是類似於{selected：2}

謝謝！

來源

2013-03-20 Roman

此代碼應該做的，你問：

// get array of 10 numbers 
// you coud use something like var ary = [0,1,2,3,4,5,6,7,8,9], for loop, or wathever you want 
var ary = $.map(Array(10), function(element, index) {return index}); 
var your_data = { selected: 2 }; 
// call renderer 
$("#items").html($("#one-select").render(ary, (function(model) { 
    return { 
     isSelected: function(number) { 
      return number==model.selected ? 'selected="selected"' : '' 
     } 
    } 
})(your_data) 
))

其中模板是

<script id="one-select" type="text/x-jsrender"> 
    <option value="{{>#data + 1}}" {{:~isSelected(#data + 1)}}>{{>#data + 1}}</option> 
</script>

這裏正在jsfidle例如：http://jsfiddle.net/gW2vD/

來源

2013-03-20 13:48:22 dugokontov

非常感謝。我忘了說下拉菜單是更大模板的一部分。以便渲染在大模板上運行。這還能完成嗎？ – Roman 2013-03-20 14:45:51

當然，看看這個例子：http://borismoore.github.com/jsrender/demos/step-by-step/06_template-composition.html。你會看到{{用於語言tmpl ='＃conditionalTemplate'/}}和{{include tmpl =「＃headerTemplate」/}}來呈現部分 – dugokontov 2013-03-20 15:21:05

太棒了。謝謝：） – Roman 2013-03-20 15:34:17

或者你也可以做一個小竅門，在使用HAML進行導入時有幫助：

%script{ id: "template_list_additional_attributes_table_types", type: "text/x-jsrender"} 
    %select 
    ="{{for items}}" 
    %option{value: "{{:value}}", 'data-selected'=> "{{:selected}}"} 
     ="{{:display}}" 
    ="{{/for}}"

在你的js

Wa.ListAddionalAttributes.prototype.select_for_table = function (aa, pos) { 
    var self = this; 

    var items = _(self.aa_types).map(function (type, index) { 
     return {display: type.display, selected: (type.option_value==aa.type ? 'true selected="selected"' : 'false '), value: type.option_value} 
    }); 

    var rendered = $("#template_list_additional_attributes_table_types").render(
     { 
      items: items} 
    ); 

    return rendered; 
};

注意，在我的例子中，模板是完整的選擇框。

來源

2014-11-05 12:42:08 Holger

如何使用jsRender創建一個選擇列表？

回答

相關問題