Backbone.js application qui ne rend point de vue

Question

J'ai trouvé Backbone.js il y a quelques jours, et je l'ai trouvé son outil assez de code pour le développement javascript mais mes compétences javascript ne sont pas grandes. Cependant, après avoir lu la documentation, j'ai décidé de coder une application simple de contact. J'enregistrer les données de contact sur localStorage du navigateur. Ceci est du code // code source pour mes contacts 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;
});

Et ceci est ma source 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>

Les données de contact est enregistré dans le stockage local, que je peux voir par Firebug mais la vue est pas mis à jour. Suis nouveau à Backbone.js. Quel est le problème, il n'y a aucune erreur javascript.

Answer 1

Essayez d'utiliser « ajouter » au lieu de « créer » pour ajouter des modèles à la collection (je ne pense pas que l'événement « ajouter » est tiré par la méthode « créer »).

Au lieu de

    Contacts.create(this.newAttributes());

Utilisez

   Contacts.add(this.newAttributes());

Pour enregistrer le modèle au stockage local, vous pouvez appeler la méthode de sauvegarde

addOne: function(contact) {

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

EDIT:

Une autre chose vérifier l'orthographe de votre « intialize » méthode que je pense qu'il devrait être « initialiser ».

Voici un jsFiddle , je ne suis pas l'enregistrer à localStorage dans le jsFiddle, mais cela ne devrait travail en vous.

Answer 2

Sur le modèle, le defaults devrait prendre en charge les valeurs par défaut, les fonctions de initialize ne sont probablement pas nécessaires; quelqu'un me corriger si je me trompe.

Sur votre ContactView, vous pouvez avoir à changer votre ligne à rendre dans votre méthode initialize:

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