Как правильно работать с backbone.localStorage?

Question

[Вадим Белкин]

Никак не разберусь как осуществить хранение данных в Backbone через backbone.localStorage.
Создаю коллекцию, добавляю в неё.

App.Collections.Elements= Backbone.Collection.extend({
    model: App.Models.Element,
    localStorage: new Backbone.LocalStorage("SomeCollection")
  });
var elements = new App.Collections.Elements(elementsArray);

При загрузке страницы выводится список моделей в коллекции. Через форму в её VIEW добавляется модель в коллекцию следующим образом

this.model.set({
        surname: this.surname.val(),
        name: this.name.val(),
        middlename: this.middlename.val(),
        tel: this.tel.val(),
        email: this.email.val()
});
elements.add(this.model);

На странице добавляется новый элемент. Но при обновление страницы всё сбрасывается.

Answer 1

[personaljs]

потому что метод set только устанавливает параметры модели, а для сохранения модели используется метод save

Answer 2

[Вадим Белкин]

Спасибо. Но я наверное что-то не так делаю опять. Не хотелось бы наглеть и доставать с вопросами, но второй день никак не могу понять как добавлять созданные модели в коллекцию в localStorage. С примерами использования backbone.localStorage разбираюсь, но не получается.
1) Создаю экземпляр модели

App.Models.Element= Backbone.Model.extend({
    defaults: {
       ........
    }
  });

2) Создаю и заполняю коллекцию начальными данными

App.Collections.Elements= Backbone.Collection.extend({
    model: App.Models.Element,
    localStorage: new Backbone.LocalStorage("SomeCollection")
  });
  var elements= new App.Collections.Elements(elementsArray);

3) Потом создаю VIEW

App.Views.Elements= Backbone.View.extend({
    template: tpl('elementsTpl'),

    initialize: function() {
      this.listenTo(elements, 'add', this.render);
    },

    render: function() {
      this.$el.html( this.template({ elements: elements.toJSON() }) );
      return this;
    }
  });

Шаблон

<script id="elementsTpl" type="text/template">
      <ul class="elements">
        <% _.each(elements,function(element) { %>
        <li class="element">
          <div class="element-name"><%= element.name %></div>
          <div class="element-date"><%= element.date%></div>
        </li>
        <% }); %>
      </ul>
    </script>

4) В VIEW приложения при инициализации

var elementsView = new App.Views.Elements;
      $('#elements-container').html(elementsView .render().el);

При загрузке страницы создаётся список из начальных моделей. Через консоль при добавление или удаление моделей из коллекции elements меняется список соответственно, но при перезагрузке всё сначала. Добавляю в коллекцию через add или create. Поясните пожалуйста, что делаю не так

Comments

[personaljs]

в вашем коде во вьюшке отсутствует fetch данных с сервера(в вашем случае из хранилища). Разместите до listen elements.fetch();

[personaljs]

а также видимо и нет сохранения моделей на сервер(хранилище). После добавления модели в коллекцию посмотрите в localstorage есть что то там

[personaljs]

Думаю не будет так как сохраняются модели либо через свой метод model.save(), либо через коллекцию через метод collection.create()

[Вадим Белкин]

Спасибо! Тоже понял что дело в fetch(). Но если его ставлю до listen, то список создаётся пустым. А если ставлю в VIEW приложения при инициализации то создаётся как раз с тестовыми начальными данными, но при добавление они удаляются

[Вадим Белкин]

Когда нужно вызывать fetch, когда создается коллекция или после создания пустой коллекции, а после fetch заполняется исходными моделями? Перед render списка когда вызывается - удаляются исходные модели из коллекции, а иначе они удаляются при добавление новой модели в коллекцию