0

我是 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

我认为我遇到的问题是 Collection fetch() 的行为，我已经工作了好几个小时，无法弄清楚问题是什么

4

1 回答 1

0

我能够找出问题所在，并决定在这里发帖，这样其他人就不必像我一样继续抨击他们的头了。

在 PostView 视图类中，我必须将下划线 .each 包含在 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 时，我现在可以看到以下内容；

我希望这可以帮助别人。我还是 Backbone 的新手，所以我并不是在谈论理想的解决方案，但如果有人对代码的任何部分有更好的想法，我将不胜感激。

于 2012-11-11T20:58:59.013 回答