Mustacheテンプレートを使用してドロップダウンにオプションを追加するにはどうすればよいですか？

Question

ここに私のjavascriptオブジェクトがあり、私はドロップダウンにオプションを追加したいですか？私はプロパティ名が値として行くとプロパティの値は、各オプションのテキストとして行くか？

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

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

の下にあなたはどのようにこのための口ひげテンプレートを書くために私を伝えることができるように出力が可能でしょうか？事前

Answer 1

のおかげでは、理想的には、あなたのオブジェクトは、オブジェクトの配列のようになります。

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); 
}); 

Answer 2

は、あなたのデータがリストであるから、それは配列でなければならないことに合意しました。しかし、配列を手作業で反復する代わりに、このMustache-ierテクニックを使用することを提案したいと思います。テスト済み。

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