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