¿Cómo establecer un valor seleccionado en una lista desplegable usando Mustache.js?

Question

¿Es posible hacer esto con 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

El atributo val no funciona, porque un <select> toma su valor a partir de los <option> s que tienen el atributo selected. No estoy muy familiarizado con el bigote, pero esto debe trabajo:

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

creo que la plantilla que está utilizando no es idiomático bigote — de que sea demasiado grano grueso; en realidad no eres plantilla cualquier cosa. Algo como esto podría ser más bigote-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

que poco tarde, lo sé, sólo para referencia futura:

<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

si no lo hace desea modificar la matriz o el árbol DOM después puede utilizar una función:

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

que usan este truco para que sea sencillo:

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

De esta manera, se puede transformar este tipo de datos:

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

Con este tipo de plantilla bigote:

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

Te gusta esto:

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

¡Lo que todavía es muy fácil de leer! La única advertencia es que no puedes tener un '.' en tus valores