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

在Backbone中渲染下拉菜单

1 个答案: