如何使用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创建一个选择列表？

回答

相关问题