如何使用 jsRender 创建选择列表？答案

【问题标题】：How to create a select list using jsRender?如何使用 jsRender 创建选择列表？
【发布时间】：2013-03-09 15:01:26
【问题描述】：

我正在使用 jsRender 并想创建一个 <select> 标签，列出 1 到 10 的数字。

我正在获取我想从模型中选择的索引。

即创建这样的下拉列表：

<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 }

谢谢！

【问题讨论】：

标签： jquery jquery-templates jsrender

【解决方案1】：

此代码应该按照您的要求执行：

// 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/

【讨论】：

非常感谢。我忘了说下拉菜单是更大模板的一部分。这样渲染就在一个大模板上运行。这还能实现吗？
当然，看看这个例子：borismoore.github.com/jsrender/demos/step-by-step/…。你会看到 {{for languages tmpl='#conditionalTemplate'/}} 和 {{include tmpl="#headerTemplate"/}} 来渲染部分

【解决方案2】：

或者你可以做一个小技巧，在 Rails 中使用 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;
};

请注意，在我的示例中，模板位于完整的选择框上。

【讨论】：