Comment ajouter des options à une liste déroulante en utilisant le modèle Mustache ?

Question

Voici mon objet javascript et je veux ajouter des options à la liste déroulante ? Je veux que le nom de la propriété soit utilisé comme valeur et que la valeur de la propriété soit utilisée comme texte dans chaque option ?

{ "": "", "CSharp40": "C# 4.0", ".NET": ".NET", "JQuery": "JQuery", "Javascript": "Javascript" }

Le résultat serait le suivant

<select id="courses"> 
    <option value=""></option>
    <option value="CSharp40">C# 4.0</option>
    <option value=".NET">.NET</option>
    <option value="JQuery">JQuery</option>
    <option value="Javascript">Javascript</option>
</select>

pouvez-vous me dire comment écrire un modèle de Mustache pour cela ? Merci d'avance

Answer 1

Je suis d'accord que puisque vos données sont une liste, elles devraient être dans un tableau. Mais au lieu d'itérer manuellement sur votre tableau, je vous propose d'utiliser cette technique plus moustachue. Testé.

var courses = [
    {val: "", title:""},
    {val: "CSharp40", title: "C# 4.0"},
    {val: ".NET", title: ".NET"},
    {val: "JQuery", title: "JQuery"},
    {val: "Javascript", title: "Javascript"}
];

var template = "<select id='courses'>{{#list}}<option value='{{val}}'>{{title}}</option>{{/list}}</select>";

// because Mustache doesn't like anonymous arrays of objects
var rendered_template = Mustache.to_html(template, {"list":courses} );

$('#list-container').html(rendered_template);

Answer 2

Idéalement, votre objet serait un tableau d'objets :

var obj = [{val:"",title:""},{val:"CSharp40",title: "C# 4.0"},{val: ".NET",title: ".NET"},{val: "JQuery",title: "JQuery"},{val: "Javascript",title: "Javascript"}];

//open select
var output = '<select id="courses">';
//add each value
$.each(obj,function(){
    output += Mustache.render('<option value="{{val}}">{{title}}</option>', this);
});
//close select
output += '</select>';

//output
$(function(){ //on document ready
    $('body').html(output); 
});