Backbone.js non applicazione di rendering vista

Question

Ho trovato backbone.js un paio di giorni fa, e ho scoperto il suo codice di uno strumento abbastanza per lo sviluppo javascript se la mia abilità JavaScript non sono grandi. Tuttavia dopo aver letto la documentazione, ho deciso di codificare una semplice applicazione di contatto. Risparmio i dati di contatto sul navigatore localStorage. Questo è il codice // codice sorgente per i miei contatti app

$(function() {


    //Contact Model
    Contact = Backbone.Model.extend({
        //Contact Defaults
        defaults : {
            first_name : 'First Name',
            last_name : 'Last Name',
            phone : 'Phone Number'
        },
        //Constructor(intialize)
        //Ensuring each contact has a first_name,last_name,phone
        intialize: function(){
            if(!this.get("first_name")) {
                this.set({"first_name":this.defaults.first_name});
            }
            if(!this.get("last_name")) {
                this.set({"last_name":this.defaults.last_name});
            }
            if(!this.get("phone")) {
                this.set({"phone":this.defaults.phone});
            }
        }
    });

    //Contact Collection

    //The collection is backed by localstorage
    ContactList = Backbone.Collection.extend({
        //Model
        model : Contact,
        //Save all contacts in localstorage under the namespace of "contacts"
        localStorage: new Store("contacts")
    });

    //Create global collection of Contacts
    Contacts = new ContactList;

    //Contact View
    ContactView = Backbone.View.extend({
        tagName : "li",

        template: _.template($("#item_template").html()),

        events : {
            "click span.contact-delete": "delete_contact"
        },
        intialize: function(){
            this.bind('change',this.render,this);
            this.bind('destroy',this.remove,this);
        },
        render: function() {
          $(this.el).html(this.template(this.model.toJSON()));
          this.setContent();
          return this;
        },
        setContent: function() {
            var first_name = this.model.get("first_name");
            var last_name = this.model.get("last_name");
            var phone = this.model.get("phone");
            var name = first_name+" "+last_name;
            this.$('.contact-name').html(name);
            this.$('.contact-phone').html(phone);
        },
        remove: function() {
              $(this.el).remove();
        },
        delete_contact: function() {
            this.model.destroy();
        }
    });

    //The Application
    AppView = Backbone.View.extend({

        el: $("#contact-app"),

        events : {
            "click #new-contact #save-button": "createContact"
        },
        intialize: function() {

            Contacts.bind("add", this.addOne, this);
            Contacts.bind("reset", this.addAll, this);          
            Contacts.fetch();
        },

        // Add a single contact item to the list by creating a view for it, and
        // appending its element to the `<ul>`.
        addOne: function(contact) {
          var view = new ContactView({model: contact});
          this.$("#contact-list").append(view.render().el);
        },
        // Add all items in the **Contacts** collection at once.
        addAll: function() {
          Contacts.each(this.addOne);
        },
        // Generate the attributes for a new Contact item.
        newAttributes: function() {
          return {
            first_name : this.$('#first_name').val(),
            last_name : this.$('#last_name').val(),
            phone : this.$('#phone').val()
          };
        },
        createContact: function() {
            Contacts.create(this.newAttributes());
            //Reset Form
            this.$('#first_name').val('');
            this.$('#last_name').val('');
            this.$('#phone').val('');
        }
    });

    // Finally,kick things off by creating the **App**.
     var App = new AppView;
});

E questa è la mia fonte html

   <div id="contact-app">

        <div class="title">
            <h1>Contacts App</h1>
        </div>

        <div class="content">

            <div id="new-contact">
                <input name="first_name" placeholder="First Name" type="text" id="first_name"/>
                <input name="last_name" placeholder="Last Name" type="text" id="last_name" />
                <input name="phone" placeholder="Phone Number" type="text" id="phone" />
                <button id="save-button">Create Contact</button>
            </div>

            <div id="contacts">
                <ul id="contact-list">
                </ul>
            </div>

            <div id="contact-stats"></div>

        </div>

    </div>
    <script type="text/template" id="item_template">
    <div class="contact">
        <div class="contact-name"></div>
        <div class="contact-phone"><div>
        <span class="contact-delete"></span>
    </div>
  </script>

I dati di contatto viene salvato nella memoria locale, che posso vedere tramite Firebug ma la vista non è aggiornato. Sono nuovo di backbone.js. Qual è il problema, non ci sono errori javascript.

Answer 1

provare a utilizzare "Aggiungi" invece di 'creo' per l'aggiunta di modelli per la raccolta (non credo che l'evento 'aggiungere' viene licenziato dal metodo 'creare').

Al posto di

    Contacts.create(this.newAttributes());

Usa

   Contacts.add(this.newAttributes());

Per salvare il modello di memoria locale è possibile chiamare il metodo di salvataggio

addOne: function(contact) {

      var view = new ContactView({model: contact});
      contact.save();
      this.$("#contact-list").append(view.render().el);
    }, 

Modifica

Un'altra cosa controllare l'ortografia del metodo di "inizializzare" Penso che dovrebbe essere "inizializzare".

Ecco un jsFiddle , non sto salvarlo localStorage nel jsfiddle, ma che dovrebbe lavoro da voi.

Answer 2

Nel modello, l'defaults dovrebbe prendersi cura dei valori di default, le funzioni initialize non sono probabilmente necessari; qualcuno mi corregga su questo se sbaglio.

Sul ContactView, potrebbe essere necessario modificare la rendono la linea a questo nel metodo initialize:

this.model.bind('change', _.bind(this.render, this));