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

mustache php

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 de las <option> s que tienen el atributo selected . No estoy muy familiarizado con Moustache, pero esto debería funcionar:

// 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ás usando no es un Bigote idiomático: es demasiado grueso; en realidad no estás modelando nada. 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

Llegué un poco tarde, lo sé, solo para futuras referencias:

<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 luego no quiere modificar la matriz o el árbol DOM, puede usar 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

Yo uso este truco para hacerlo simple:

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

De esta forma, puedes transformar este tipo de datos:

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

Con este tipo de plantilla de 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>

Me gusta esto:

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

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