Question

我是Backbone的新手，并试图整理一个小应用程序并且在获取视图以呈现客户端时遇到问题。

这是我在玉器中的客户端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);

  }

}）

我看到从fetch（）方法返回JSON并且迭代了该集合，但结果永远不会以客户端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(""));

Answer 2

您应该尝试以下方法：

this.collection.bind("fetched", this.render, this);

获取成功后，Backbone View无法呈现

2 个答案: