Question

通过建立my simple blog app我正在进行的自我思考过程中，我找到问题的解决方案并遇到新问题。

现在成功从第一个视图路由到第二个视图，并且页面由新视图html填充。

从第二个视图成功保存到db新帖子，这是一个添加新帖子的表单。

第一个问题是：在第一个视图中，我按顺序呈现了五次。没有任何js控制台消息。我从第二个视图中只保存了一次这些帖子，这是我保存帖子的postformview。

第二个问题是：从浏览器后退按钮导航时，从第二个视图到第一个视图，没有任何帖子呈现到页面中，只呈现此页面的一个模板中的标题等。

我想念的问题是什么？

第一眼观点：

    var postsListView = Backbone.View.extend({
    collection: new postsCollection(),//! The Collection may be created to use in view. with new Coolectionname(). SOLVED it must be created, this attr is not suffcent and is not crating it.
    template1: _.template( $('#postsListTemplate').html() ),//!!!Once forgot .html().
    template2: _.template( $('#postsListItemTemplate').html() ),
    initialize: function(){
        this.collection.fetch();
        this.collection.on('add', this.renderPostsListItem, this);
    },

    render: function(){
        this.$el.html( this.template1() );//!this.el or this.$el. (each) or (each.toJSON()). SOLVED: use this.$el alongside el: a string, without $().
        return this;
        //* return this in every views render: if you want to chain el to render() of the view, for example in router  while pcaing the rendered views el into DOM.
    },

    renderPostsListItem: function(){
        console.log("view method renderPostsListItem have been reached.");
        this.ul = 'ul';
        this.collection.forEach(function(each){
            $(this.ul).append( this.template2( each.attributes ) );
            }, this);
        return this;
    },

    events: {
        "click a": 'toPostFormRoute'
    },
    toPostFormRoute: function(e){
        console.log("view method toPostFormRoute have been reached.");

        e.preventDefault();
        Backbone.history.navigate( '/posts/postform' , {trigger: true});
        console.log("view method toPostFormRoute have been reached.");
    }
});

路由器：

//Define Client-Side Routes
var appRouter = Backbone.Router.extend({

    el: 'body',

    routes: {
        'posts/postform': 'viewPostForm',
        '': 'viewPosts'
    },

    viewPosts: function(){
        console.log("router method viewPosts have been reached.");

        this.postslistview = new postsListView();
        $(this.el).html( this.postslistview.render().el );
    },

    viewPostForm: function(){
        console.log("router method viewPostForm have been reached.");
        this.postformview = new postFormView();
        $(this.el).html( this.postformview.render().el );
    }
});

更新：变化。在添加事件触发时添加每个模型y将模型添加到方法并仅使用它渲染模板，仅附加它。没有迭代收集所有。

这解决了第一个问题，但没有解决第二个问题。具体问题可能是什么？

第一个视图中的代码片段：

 initialize: function(){
            this.collection.fetch();
            this.collection.on('add', this.renderPostsListItem, this);
        },
renderPostsListItem: function(model){
        console.log("view method renderPostsListItem have been reached.");
            this.$el.find('ul').append( this.template2(model.toJSON()) );
        return this;
    },

Answer 1

问题：

当新的项目/模型被添加到集合中时，集合中存在的所有项目都会呈现/附加到视图的EL而不是仅添加到新的项目中。

根本原因：

renderPostsListItem#3

解决方案

renderPostsListItem: function(model){
    console.log("view method renderPostsListItem have been reached.");
    this.collection.forEach(function(each){
        this.$el.find('ul').append( this.template2(model.toJSON()) );
        }, this);
    return this;
},

http://backbonejs.org/#Collection-add

在Backbone应用程序中多次呈现集合

1 个答案: