Backbone.js Collection

Question

저는 Backbone.js의 초보자입니다. 몇 가지 설명서와 몇 가지 설명서를 읽은 후 간단한 블로그 앱을 사용하기로 결정했습니다. 내가 가진 주요 문제는 내 컬렉션을 표시 할 수없는 것입니다. 다음은 내 코드이며 모든 도움을 주실 것입니다. POSTVIEW 클래스의

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "" : "main", 
     "posts" : "main", 
     "posts/add" : "addPost", 
     "posts/:id" : "postDetails" 
    }, 

    initialize: function() { 

    }, 

    main: function(){ 

     var mainview = new MainView(); 
    } 

}) 

$(document).ready(function() { 
    app = new AppRouter(); 
    Backbone.history.start(); 
}); 



// Model 
var Post = Backbone.Model.extend({ 
    initialize: function() { 

    } 
}); 

// Collection 
var PostCollection = Backbone.Collection.extend({ 
    model: Post, 
    url:"http://local.host/spadmin/posts" 
}); 

var MainView = Backbone.View.extend({ 
    'el':'#page', 
    template: _.template($('#main-view').html()), 

    initialize: function(){ 
     _.bindAll(this,'render','postsView'); 
     this.pageTitle = 'Blog Posts'; 
     this.posts = new PostCollection(); 
     this.posts.fetch({success:function(){ 

     }}); 

     this.render(); 
    }, 


    postsView: function(){ 
     if(typeof(this._postsView) === 'undefined'){ 
      this._postsView = new PostsView({collection: this.posts}); 
     } 
     return this._postsView; 
    }, 

    render: function() { 
     this.$el.append(this.template(this)); 
     this.postsView().render(); 
    } 

}); 



PostsView = Backbone.View.extend({ 
    el:'#posts', 

    template:_.template($('#posts-view').html()), 

    initialize: function(){ 
     _.bindAll(this,'render','appendPost'); 
     this.collection.bind('add',this.appendPost); 
    }, 

    appendPost: function(post) { 
     var postView = new PostItemView({model:post}); 
     this.$el.find('tbody').append(postView.render().el); 
    }, 

    render:function() { 
     this.$el.html(''); 
     this.$el.append(this.template(this)); 
     console.log(this.collection); 
     _(this.collection).each(this.appendPost, this); 
    } 
}); 

PostItemView = Backbone.View.extend({ 
    tagName: 'tr', 
    template:_.template($('#post-item').html()), 

    initialize: function(){ 
     _.bindAll(this, 'render'); 
     this.render(); 
    }, 

    render: function() { 
     this.$el.html(this.template(this.model)); 
     return this; 
    } 

}); 

을 console.log는 다음과 같은 출력을왔다;

d {length: 0, models: Array[0], _byId: Object, _byCid: Object, _callbacks: Object} 
_byCid: Object 
_byId: Object 
_callbacks: Object 
length: 3 
models: Array[3] 
__proto__: x 

나는 데 문제가 컬렉션의 동작 내가 시간 동안 일에 있었다) (취득 해, 문제는 내가 알아낼 수 있었다

Answer 1

무엇인지 알아낼 수 없습니다 생각 문제는 여기에 게시하기로 결정 했으므로 다른 사람이 내가했던 것처럼 계속 머리를 부수 지 않아도됩니다.

PostView 뷰 클래스에서 밑줄을 .coach.fetch() 내에 래핑해야했습니다. 콜백 콜백 속성에서 모델이 반환 된 것으로 나타났습니다. 그래서 내가 한 것은 다음을 추가하는 것이 었습니다.

render:function() { 
    this.$el.html(''); 
    this.$el.append(this.template(this)); 
    that = this; 
    this.collection.fetch({success:function(collection, response){ 
     _(collection.models).each(that.appendPost, that); 
    }}); 
    } 

console.log를 만들었을 때 다음을 볼 수 있습니다.

이 정보가 도움이되기를 바랍니다. 나는 여전히 백본에 익숙하지 않기 때문에 이상적인 솔루션에 대해 실제로 말하고있는 것은 아니지만 누구나 코드의 일부분에 대해 더 좋은 아이디어가 있다면 기여에 감사드립니다.