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

または、レールで 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 に答える