Question

我正在使用jsRender，并希望创建一个{1}}标记，列出1到10的数字。

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

即创建一个这样的下拉列表：

<select>

模型的编号为“2” - 因此必须选择它。

如何使用jsRender实现这一目标？

我的模型类似{selected：2}

谢谢！

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

Answer 2

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

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

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

2 个答案: