如何使用Mustache.js在下拉列表中設置選定的值？

Question

是否可以用Mustache.js來做到這一點？

var data = {"val":"3"}, 
    template = '<select>' + 
        '<option value="1">1</option>' + 
        '<option value="2">2</option>' + 
        '<option value="3">3</option>' + 
       '</select>'; 

var html = Mustache.to_html(template, data); 

$(html).appendTo('body'); 

Answer 1

的val屬性不起作用，因爲<select>需要從<option> S的有selected屬性的價值。我不是很familar與鬍鬚，不過這應該工作：

// snip...   
var html = Mustache.to_html(template, data); 
$(html) 
    .find('option[value=3]').attr('selected', true) 
    .end().appendTo('body'); 

我認爲你正在使用的模板是不是地道的小鬍子—這太粗粒度;你實際上並不是模板什麼。像這樣的東西可能更小鬍子Y：

var template = '<select>{{#options}}' + 
        '<option value="{{val}}" {{#sel}}selected{{/sel}}>' + 
         '{{txt}}' + 
        '</option>' + 
       '{{/options}}</select>', 

    data = {options: [ 
     {val: 1, txt: 'uno'}, 
     {val: 2, txt: 'dos'}, 
     {val: 3, txt: 'tres', sel: true} 
    ]}; 

var html = Mustache.to_html(template, data); 

$(html).appendTo('body'); 

Demo →

Answer 2

我有點晚了，我知道，只是以供將來參考：

<script> 

var templates = { 
    'dropbox': '{{#options}}{{>option}}{{/options}}', 
    'option': '<option value="{{value}}"{{#selected}} selected="selected"{{/selected}}>{{text}}</option>' 
}; 

var data = { 
    'options': [ 
     { 'value': '1', 'text': 'One' }, 
     { 'value': '2', 'text': 'Two', 'selected': true }, 
     { 'value': '3', 'text': 'Three' } 
    ] 
}; 

$('#number').append(Mustache.render(templates.dropbox, data, templates)); 

</script> 

<select id='number' name='number'> 
    <option value="0">Choose a number</option> 
</select> 

Answer 3

，如果你不想要修改數組或DOM樹後，可以使用一個函數：

var selval=3; // select 3 
var template = '<select>{{#options}}' + 
        '<option value="{{val}}" {{selected}}>{{txt}}</option>' + 
       '{{/options}}</select>'; 
var data={ 
    options: [ 
     {val: 1, txt: 'one'}, 
     {val: 2, txt: 'two'}, 
     {val: 3, txt: 'three'} 
    ], 
    selected: function() { 
     if (this.val==selval) return "selected"; 
     return ""; 
    } 
}; 


var html = Mustache.to_html(template, data); 

Answer 4

我使用這個技巧來保持它的簡單：

buildOptions = function(object) { 
    for (var i in object) { 
     object[i + '=' + object[i]] = true; 
    } 
    return object; 
} 

通過這種方式，你可以將這種數據：

{ 
    field1: 'abc', 
    field2: 'xyz' 
} 

有了這種鬍鬚模板：

<select name="field1"> 
    <option {{#field1=abc}}selected{{/field1=abc}}>abc</option> 
    <option {{#field1=def}}selected{{/field1=def}}>def</option> 
    <option {{#field1=ghi}}selected{{/field1=ghi}}>ghi</option> 
</select> 
<select name="field2"> 
    <option {{#field2=uvw}}selected{{/field2=uvw}}>uvw</option> 
    <option {{#field2=xyz}}selected{{/field2=xyz}}>xyz</option> 
</select> 

喜歡分享：

html = Mustache.to_html(template, buildOptions(data)); 

這仍然很容易閱讀！唯一的警告是你不能有'。'在你的價值觀中。