在 Backbone 中渲染下拉菜单

Question

我是 Backbone 的新手，我正试图通过它跌跌撞撞。目前，我有一个将 json 哈希呈现到下拉菜单中的视图。当我在浏览器中检查元素时，我可以实际查看 UL 元素，并将所有 JSON 呈现到列表中，但浏览器中没有任何视觉显示。应该注意的是，我使用 twitter bootstrap 来构建下拉菜单。非常感谢任何帮助。

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 页面或外部页面的脚本标记中更容易。