javascript - 在 Backbone 中渲染下拉菜单

Question

我是 Backbone 新手，正在努力摸索。目前我有一个 View 将 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 的 Markdown ，但覆盖整个 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 页面或外部页面的脚本标记中会更容易。