Javascript 主干应用程序中多次呈现的集合

在我不断的自我思考过程中，通过构建，我找到了解决问题的方法，并遇到了新的问题

现在成功地从第一个视图路由到第二个视图，页面由新的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 );
    }
});

更新：变异。当“添加”事件触发时，通过传递添加到方法中的模型来添加每个模型，并仅使用该模型渲染模板，仅附加该模型。而不是遍历所有的集合

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

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

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

问题:

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

根本原因：

解决方案

---

每次添加模型时，都会为集合中的所有模型添加视图。这是故意的吗？对于第二个问题，显示您的路由器和第一视图代码。对于第一个问题：我意识到了这一点，但我认为页面的外观应该是这样的；每个添加的模型都会触发该方法，并通过将集合中的每个模型添加到推送到模板中的时刻来渲染视图。因此，渲染模型的数量将增加一个。为什么在每次不希望的重复中都会呈现所有这些内容。一个接一个地添加模型，每次都会触发“添加”，对吗？我已经解决了第一个问题，将事件侦听器更改为集合表单“add”和“sync”。您的代码也解决了第二个问题。请稍等，您的代码会在每次“添加”时激发方法，这也会导致重复。Listen-to应该更改为Listen-to-sync，并且triggered方法不需要作为model的参数，each.toJSON应该传递给模板函数。你能编辑你的答案吗？初始化：函数{this.collection.fetch；this.collection.on'add'，this.renderPostsListItem，this；}，renderPostsListItem:functionmodel{console.logview方法renderPostsListItem已到达；this.$el.find'ul'。附加this.template2model.toJSON；返回此；}，也应该工作，但我不明白为什么它不能解决第二个问题，而它成功地解决了第一个问题？在哪里保存的职位？收藏从哪里取来？能否确认collection.fetch实际返回的是非空集合？问题已解决。我会在这里反映。第三条评论带有代码，有一点我仍然不明白。顺便问一下，我已经为你的问题准备好了所有的代码，你能在那里查一下吗。

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