2014-02-14 15 views
1

저는 백본을 처음 접하고 작은 응용 프로그램을 구성하고 클라이언트 측 렌더링을위한보기를 가져 오는 데 문제가 있습니다.가져 오기가 성공한 후에 백본보기가 렌더링되지 않습니다.

여기 내 클라이언트 html in jade입니다.

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

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

MongoDB를

}에서 멀리 은닉 된 데이터를 가져 오기 위해 내 초기화 함수를 호출;

다음은 내 의견과 모델입니다. 내가 JSON은 페치() 메서드에서 반환되는 및 컬렉션이 반복되지만 결과는 클라이언트 HTML로 끝나는 결코 볼

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

    } 

}). 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> 

내가 뭔가 분명히 놓치고있는 것처럼 느껴지지만 문제를 정확하게 지적 할 수없는 것 같습니다.

모든 안내에 감사드립니다.

감사합니다. 다음은 작동하지 않습니다 같은

+0

는 당신이 함께 결합을 대체하는 것을 시도했다 :

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

+0

@Evgeniy,'bind === on'. 다른 말로하면,'bind'는'on'의 별칭입니다. – fbynite

답변

0

그것은 같습니다

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

jQuery의 html 기능, 당신은 배열을 제공하고 문자열을 사용합니다.

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

당신은 다음과 같은 시도해야

:와 시도?
관련 문제