Backbone.js App keine Rendering -Ansicht

Question

Ich habe vor ein paar Tagen Backbone.js gefunden und herausgefunden, dass es ein hübsches Code -Tool für JavaScript -Entwicklung ist, obwohl meine JavaScript -Fähigkeit nicht großartig ist. Nach dem Lesen der Dokumentation habe ich mich jedoch entschlossen, eine einfache Kontakt -App zu codieren. Ich speichere die Kontaktdaten auf Browser LocalStorage. Dies ist Code // Quellcode für meine Kontakt -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;
});

Und das ist meine HTML -Quelle

   <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>

Die Kontaktdaten werden im lokalen Speicher gespeichert, den ich über Firebug sehen kann, die Ansicht wird jedoch nicht aktualisiert. Bin neu bei Backbone.js. Was ist das Problem, es gibt keine JavaScript -Fehler.

Answer 1

Versuchen Sie, "Hinzufügen" anstelle von 'create' zu verwenden, um Modelle zur Sammlung hinzuzufügen (ich glaube nicht, dass das Ereignis "Add" von der Methode "Create" abgefeuert wird).

Anstatt von

    Contacts.create(this.newAttributes());

Verwenden

   Contacts.add(this.newAttributes());

Um das Modell für den lokalen Speicher zu speichern, können Sie die Speichernmethode aufrufen

addOne: function(contact) {

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

BEARBEITEN:

Eine andere Sache überprüfen Sie die Schreibweise Ihrer "Intialize" -Methode, die ich denke, dass sie "initialisieren" werden sollte.

Hier ist ein jsfiddle, Ich speichere es nicht vor LocalStorage in der JSFiddle, aber das sollte von Ihnen funktionieren.

Answer 2

Auf dem Modell die defaults sollte sich um die Standardwerte kümmern, die initialize Funktionen werden wahrscheinlich nicht benötigt; Jemand korrigiert mich darüber, wenn ich falsch liege.

Auf Ihrem ContactView müssen Sie möglicherweise Ihre Render -Linie in Ihrem in Ihrem ändern initialize Methode:

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