0

我正在使用 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 }

谢谢！

4

2 回答 2

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>

这是关于 jsfiddle 的工作示例：http: //jsfiddle.net/gW2vD/

于 2013-03-20T13:48:22.197 回答
0

或者，您可以做一个小技巧，这在在 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;
};

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

于 2014-11-05T12:42:08.900 回答