Làm cách nào để thêm tùy chọn thả xuống bằng mẫu Mustache?

Question

Đây là đối tượng javascript của tôi và tôi muốn thêm các tùy chọn để thả xuống? Tôi muốn tên tài sản đi như giá trị và giá trị tài sản đi như văn bản trong mỗi tùy chọn?

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

Kết quả sẽ như thế nào dưới đây

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

bạn có thể cho tôi biết làm thế nào để viết Moustache mẫu cho việc này? Cảm ơn trước

Answer 1

Lý tưởng nhất, đối tượng của bạn sẽ là một mảng của các đối tượng:

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

Đồng ý rằng kể từ khi dữ liệu của bạn một danh sách, nó phải ở trong một mảng. Nhưng thay vì tự lặp lại qua mảng của bạn, tôi đề nghị bạn sử dụng kỹ thuật Mustache-ier này. Thử nghiệm.

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