Backbone.js的集合

我是一個新手，Backbone.js的。在閱讀了幾篇教程以及一些文檔之後，我決定嘗試使用一個簡單的博客應用程序。我的主要問題是，我似乎無法讓我的收藏展示。以下是我的代碼，我會很感激任何幫助。Backbone.js的集合

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

});

在PostView類中的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

我想我遇到的問題是收集的取（）我一直在天，小時，想不通的問題是什麼

來源

2012-11-10 stevepop

我能想出的行爲這個問題，並決定在這裏發帖，這樣其他人就不必像我一樣繼續抨擊他們的頭腦。

在覽視圖類，我不得不在collection.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，我現在可以看到下面的;

我希望這可以幫助別人。我還是新的骨幹，所以我沒有真正談論理想中的解決方案，但如果任何人有任何代碼的一部分更好的想法，我會很高興的貢獻。

來源

2012-11-11 20:58:59 stevepop

Backbone.js的集合

回答

相關問題