骨幹查看獲取成功後無法呈現

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);