2012-08-20

Backone.js dla bezkręgowców cz.4 - Bindowanie zdażeń

Pora na rozszerzenie klasy widoku o kod, który doda stworzone zadania do listy w HTMLu. W tym celu piszemy metodę insertTask, która za pomocą prostego jQuerowego kodu doda nowy element <li> do listy zadań. Zostało już tylko podbindowanie tej metody pod zdarzenie add kolekcji. Od tej pory zawsze gdy kolekcjia zwiększy się o kolejny model - jego reprezentacja zostanie zwizualizowana w HTMLu przez naszą klasę widoku:


$(function() {
  TaskEditView = Backbone.View.extend ({
    initialize: function() {
      console.log('Initializing task list view');

      this.collection.bind('add', this.insertTask);
    },

(...)

    insertTask: function(model) {
      var item = $('<li>')
        .html(model.get('name'));

      $('#taskList').append(item);
    }
  });

To było bardzo podstawowe wprowadzenie do framworka backbone.js, jeśli chcesz lepiej poznać tą technologię - zachęcam do lektury dokumentacji na backbonejs.org

Z doświadczenia wiem, że framework ten bardzo upraszcza bardziej skomplikowane projekty. Szczególnie jest to widoczne, podczas implementacji części funkcjonalności, która (przynajmniej częściowo) wpisuje się w definicję single-page application, gdzie kodu JSowego może być dość dużo.

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

Brak komentarzy:

Prześlij komentarz