Comment définir une valeur sélectionnée dans une liste déroulante à l'aide de Mustache.js?

Est-il possible de faire cela avec 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');
InformationsquelleAutor nolabel | 2011-04-01
  1. 34

    La val attribut ne fonctionne pas, car un <select> prend sa valeur à partir de la <option>s qui ont le selected attribut. Je ne suis pas très familier avec la Moustache, mais ce devrait travail:

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

    Je pense que le modèle que vous utilisez n'est pas idiomatique Moustache — c'est trop gros grains; vous n'êtes pas vraiment de template quoi que ce soit. Quelque chose comme cela pourrait être plus Moustache-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');

    Démo →

    • Merci!!!! Je n'étais pas sûr si c'était la bonne approche.
    • Pas de problème. TBH, c'est la première Moustache code que j'ai jamais écrit ...mais j'écris beaucoup de JSP 😉
    • Est-ce de travailler avec un tableau JSON seulement? Etc. "options":["val1", "val2"]
    • peut être écrit plus court: jsfiddle.net/alexlauer/gb04k8su/1
    InformationsquelleAutor Matt Ball
  2. 12

    si vous ne souhaitez pas modifier le tableau ou l'arborescence DOM ensuite, vous pouvez utiliser une fonction:

    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);
    • Pour que cela fonctionne, vous devez supprimer le # de la {{#selected}} partie variable dans le modèle, ou qu'il va jeter un "ouvrez la section" erreur.
    • oui merci pour la correction. J'ai changé le code.
    • Aussi, il y a une faute de frappe. Dans la première ligne, vous devez définir selvar, mais ensuite, dans la selected fonction, vous faites référence à elle comme selval. Aussi, pour moi, le problème, c'est quand selval est variable, pas "statique" comme dans votre exemple. Je veux dire, quand il est dans la data objet. Et, en outre, il est un tableau (pensez à un multiple sélectionner).
    • ne devrait pas selected être un attribut de la data objet plutôt que d'un élément de options?
    • Vous êtes correct. J'ai soumis une modification.
    InformationsquelleAutor imperator
  3. 2

    J'ai peu de retard, je sais, seulement pour l'avenir, référence:

    <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>
    InformationsquelleAutor Jonathas Costa
  4. 2

    - Je utiliser ce hack pour faire simple:

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

    De cette façon, vous pouvez transformer ce type de données:

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

    Avec ce genre de Moustache Modèle:

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

    Comme ceci:

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

    Encore vraiment facile à lire! Le seul inconvénient est que vous ne pouvez pas avoir un '.' dans vos valeurs.

    • merci pour le correctif @Naktibalda
    InformationsquelleAutor François Dispaux