在Backbone中渲染下拉菜單

Question

我是Backbone的新手，並試圖絆倒我的方向。目前我有一個視圖，可以將json散列渲染到下拉菜單中。當我檢查瀏覽器中的元素時，我可以實際查看UL元素，並將所有JSON渲染爲一個列表，但瀏覽器中沒有任何內容可見。應該注意的是，我使用twitter引導來構建下拉菜單。任何幫助深表感謝。

App.Views.FilterView = Backbone.View.extend({ 
    initialize: function(){ 
    _.bindAll(this, 'render'); 
    this.$button = this.$('.dropdown'); 
    this.listenTo(this.collection, 'sync', this.render); 
}, 

render: function(){ 
    html = _.template(this.template()); 
    this.$el.html(html); 
}, 

template: function() { 
    var criteria = initial_data.criteria_hash.servers.criteria;  
    var list = ""; 

    for(var i = 0; i < criteria.length; i++){ 
    list += "<li role=\"presentation\">" + criteria[i] + "</li>"; 
    } 
    return "<ul class='criteria-list dropdown-menu' role=\"menu\">" + list + "</ul>"; 
    } 
}); 

這裏是HAML：

%h2.beta Reports 
     .criteria-container 
     .dropdown 
      %button.btn.btn-default.dropdown-toggle{"data-toggle" => "dropdown"} 
      Search Criteria 
      %span.caret 

Answer 1

看起來要覆蓋的加價下拉的一部分。在渲染功能中，您只需重新調整ul的降價，但您將覆蓋整個el。

如果你包括在你的模板功能按鈕標記它應該工作

template: function() { 
    var criteria = initial_data.criteria_hash.servers.criteria; 
    var list = ""; 

    for(var i = 0; i < criteria.length; i++){ 
     list += "<li role=\"presentation\">" + criteria[i] + "</li>"; 
    } 
    return "<button class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\">Search criteria<span class=\"caret\"></span></button><ul class='criteria-list dropdown-menu' role=\"menu\">" + list + "</ul>"; 
    } 
}); 

而這裏的一個jsbin

鏈接你可能也發現很容易模板的標記語言中分離並將其放置在HTML頁面或外部頁面的腳本標記中。