Несколько раз созданная коллекция в приложении Backbone

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

UPDATE: Изменение. добавляя каждую модель, когда событие add уволило 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