Backone.js dla bezkręgowców cz.3 - Kolekcja

Kolekcja w Backbone to zwyczajnie lista modeli. W naszym przykładzie potrzebujemy modelu Task reprezentującego pojedyńcze zadanie z listy zadań. Kolekcja TaskCollection będzie zawierała listę zadań:

//Model
var Task = Backbone.Model.extend({
  initialize: function(){
    console.log("New Task initialized");
  }
});

//Kolekcja
var TaskCollection = Backbone.Collection.extend({
    model: Task
});

Naturalnie musimy teraz zainicjować kolekcję:

//Instancja Kolekcji
var tasks = new TaskCollection();

W kolejnym kroku zmodyfikujemy zadeklarowaną w poprzednim tutku instancję widoku, wstrzykując do niej nasz obiekt kolekcji zadań:

//Instancja widoku 
taskedit = new TaskEditView({
  el: 'body',
  collection: tasks
});

Teraz gdy mamy do dyspozycji w widoku obiekt kolekcji, możemy już nią swobodnie manipulować. Na początek zadbamy o uzupełnianie kolekcji o nowe zadania:

//klasa widoku listy zadań
$(function() {
  TaskEditView = Backbone.View.extend ({
    initialize: function() {
      console.log('Initializing task list view');
    },

    events: {
      "click #addTask" : "showPrompt"
    },

    showPrompt: function() {
      var taskName = prompt("Co chcesz dziś zrobić?");

      this.createNewTask(taskName);
    },

    createNewTask: function(taskName) {
      var taskItem = new Task({
        name: taskName
      });

      this.collection.add(taskItem);

      console.log(this.collection.toJSON());
    }
  });

Na końcu metody showPrompt dodaliśmy wywołanie createNewTask, która uzupełni kolekcję. Służy do tego metoda add kolekcji, jako parametr podajemy model. W tym celu stworzyliśmy instancję klasy Task, wstrzykując w nią podane przez użytkownika zadanie. Na końcu metody w celach szkoleniowych zapisujemy w konsoli Jsonową reprezentację kolekcji.

Teraz gdy podamy dwa kolejne zadania jako "Napisać kolejny odcinek tutka" i "Skosić trawnik", na konsoli wyświetli się :

Initializing task list view

New Task initialized

[Object { name="Napisać kolejny odcinek tutka"}]

New Task initialized

[Object { name="Napisać kolejny odcinek tutka"}, Object { name="Skosić trawnik"}]

cdn...

Wszystkie kody z tego tutka są dostępne publicznie w repo bitBucket:

git clone https://bitbucket.org/gmotyl/backbone_tutorial.git

git clone git@bitbucket.org:gmotyl/backbone_tutorial.git