骨干查看获取成功后无法呈现

Question

我是Backbone的新手，尝试将一个小应用放在一起，并在获取视图呈现客户端时遇到问题。

这是我在jade中的客户端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(); 
}) 

这叫我的初始化函数来抓取是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);