błąd backbone.js - Uncaught TypeError: Object [object Object] ma metodę 'Ustaw'

Question

mój kod:

Jestem nowy backbone.js i stara się zbudować aplikację z backbone.js i PHP. Kiedy próbuję zadzwonić add w routerze, otrzymuję błąd:

Uncaught TypeError: Object [object Object] has no method 'set'.

Proszę pomóc mi znaleźć mój błąd.

Dzięki.

// Models 
    window.Users = Backbone.Model.extend({ 
     urlRoot:"./bb-api/users", 
     defaults:{ 
      "id":null, 
      "name":"", 
      "email":"", 
      "designation":"" 
     } 
    }); 

    window.UsersCollection = Backbone.Collection.extend({ 
     model:Users, 
     url:"./bb-api/users" 
    }); 


    // Views 


    window.AddUserView = Backbone.View.extend({ 

     template:_.template($('#new-user-tpl').html()), 

     initialize:function(){ 
      this.model.bind("click", this.render, this); 
     }, 

     render:function(){ 
      $(this.el).html(this.template(this.model.toJSON())); 
      return this; 
     }, 

     events:{ 
      "click .add":"saveUser" 
     }, 

     saveUser:function(){ alert('saveUser'); 
      this.model.set({ 
       name:$("#name").val(), 
       email:$("#email").val(), 
       designation:$("#designation").val() 
      }); 

      if(this.model.isNew()){ 
       this.model.create(this.model); 
      } 
      return false; 
     } 
    }); 


    // Router 
    var AppRouter = Backbone.Router.extend({ 

     routes:{ 
      "":"welcome", 
      "users":"list", 
      "users/:id":"userDetails", 
      "add":"addUser" 
     }, 


     addUser:function(){ 
      this.addUserModel = new UsersCollection(); 
      this.addUserView = new AddUserView({model:this.addUserModel}); 
      $('#content').html(this.addUserView.render().el); 
     } 


    }); 

    var app = new AppRouter(); 
    Backbone.history.start(); 

Answer 1

Jak sugerowano w komentarzach, problem zaczyna się tutaj tutaj:

this.addUserModel = new UsersCollection(); 
this.addUserView = new AddUserView({model:this.addUserModel}); 

a kończy tutaj:

saveUser:function(){ alert('saveUser'); 
    this.model.set({ 

Przekazując kolekcję zamiast modelu tworzonego nieporozumień, iw rezultacie później w funkcji saveUser próbujesz wywołać metodę Backbone.Model (set) w instancji Backbone.Collection.

---

Uwaga: Począwszy od wersji 1.0.0 Backbone.Collection ma teraz metodę set. W poprzednich wersjach, takich jak ta użyta przez autora pytania, metoda ta była zamiast tego nazywana update.

---

Aby wyjaśnić ten kod, należy wykonać kilka czynności. Na początek chciałbym zmieniać nazwy klas modelu i zbiórki tak, to jasne, że model jest pojedynczej forma i kolekcja jest formą mnogiej:

window.Users =>window.User

window.UsersCollection =>window.Users

Następny, chciałbym utworzyć nowy User modelu, zamiast Users kolekcji, i przekazać to do widzenia:

this.addUserModel = new User(); 
this.addUserView = new AddUserView({model:this.addUserModel}); 

Wreszcie, chciałbym usunąć te linie:

if(this.model.isNew()){ 
    this.model.create(this.model); 
} 

Po pierwsze, model zawsze będzie nowa (jak tylko stworzył go przed przekazaniem go), ale co ważniejsze, nie robić należy wywołać metodę Collection 'create, ponieważ ta metoda tworzy nowy model, jeśli już go utworzono. Być może powinieneś dodać:

this.model.save(); 

jeśli masz zamiar zapisać model na serwerze.

Ponieważ już określono model urlRoot, który powinien być wszystkim, czego potrzebujesz do utworzenia nowego modelu, przekaż go do widoku, wypełnij jego atrybuty w oparciu o elementy DOM, a na koniec zapisz atrybuty tego modelu na twój serwer.

Answer 2

Myślę, że napotykasz problem z zakresem obiektu. Po wystrzeleniu zdarzenia wysyłane jest do obiektu zdarzenia do tej funkcji. Po prostu spróbuj to może działać Zadeklaruj zmienną globalną z bieżącego widoku wewnątrz Initialize

initialize : function(){ self = this; } 

następnie zmienić to do siebie,

 saveUser:function(){ alert('saveUser'); 
     self.model.set({ 
      name:$("#name").val(), 
      email:$("#email").val(), 
      designation:$("#designation").val() 
     }); 

     if(self.model.isNew()){ 
      self.model.create(this.model); 
     } 
     return false; 
    }