javascript - 获取成功后主干 View 不渲染

Question

我是 Backbone 新手，尝试组合一个小型应用程序，但在获取渲染客户端的 View 时遇到问题。

这是我的客户端 html 代码。

extends layout

block content
  .row
    #breadcrumbs.span12

  script#room-list-template(type="text/template")
    <td><a href="#"><%=name%></a></td>
    <td><button class="btn btn-info">Join Room</button></td>


 script(src="/javascripts/dislocated_poker/index.js").
 script(src="/javascripts/dislocated_poker/nav.js").
 script(src="/javascripts/dislocated_poker/room.js").
 script(type="text/javascript").
 $(function(){
  DislocatedPoker.init();
})

这调用我的 init 函数来获取存储在 MongoDb 中的数据

DislocatedPoker = {
init : function() {
    var crumbView = new DislocatedPoker.BreadcrumbView({el : "#breadcrumbs"});
    crumbView.render();

    var rooms = new DislocatedPoker.Rooms();
    var roomListView = new DislocatedPoker.RoomListView({collection : rooms});
    rooms.fetch();
}

};

这是我的观点和模型。

DislocatedPoker.Room = Backbone.Model.extend({

});

DislocatedPoker.Rooms = Backbone.Collection.extend({
  model : DislocatedPoker.Room,
  url : "/api/rooms"
});

DislocatedPoker.RoomView = Backbone.View.extend({
  tagName : "tr",
  render : function() {
    var template = $("#room-list-template").html();
    var compiled = _.template(template, this.model.toJSON());
    $(this.el).html(compiled);
    return this;
  }
 })

DislocatedPoker.RoomListView = Backbone.View.extend({
  initialize : function() {
    this.collection.bind("reset", this.render, this);
    this.collection.bind("add", this.render, this);
  },
  tagName : "table",
  className : "table table-striped",
  render : function() {
    var els = [];
    this.collection.each(function(item) {
        var itemView = new DislocatedPoker.RoomView({model : item});
        els.push(itemView.render().el);
    })
    //return this;
    $(this.el).html(els);
    $("#room-list").html(this.el);

  }

})

我看到 JSON 从 fetch() 方法返回，并且集合被迭代，但结果永远不会以客户端 html 的形式结束。如果我查看 HTML 的源代码，我会看到以下模板应呈现的位置。

<script id="room-list-template" type="text/template"><td><a href="#"><%=name%></a></td>
<td><button class="btn btn-info">Join Room</button></td>

我觉得我遗漏了一些非常明显的东西，但似乎无法查明问题所在。

非常感谢任何指导。

谢谢。

Answer 1

看起来以下内容不起作用:

$(this.el).html(els);

jQuery 的 html 函数接受一个字符串，您提供一个数组。尝试使用:

$(this.el).html(els.join(""));