Modell Methodenfehler beim Versuch zu navigieren

Question

Ich habe mehrere Backbone-Modelle in einer Collection-Ansicht gerendert, und ich habe auch eine Route, die eine Ansicht dieses Modells rendern sollte. So, hier kommen die Ansichten

resume.js

// this renders a single model for a collection view 
var ResumeView = Backbone.View.extend({ 
    model: new Resume(), 
    initialize: function() { 
     this.template = _.template($('#resume').html()); 
    }, 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON)); 
     return this; 
    } 
}); 

#resume template

<section id="resume"> 
    <h1><%= profession %></h1> 
    <!-- !!!!! The link for a router which should navigate to ShowResume view --> 
    <a href="#resumes/<%= id %>">View Details</a> 
</section> 

Sammlung Ansicht:

var ResumeList = Backbone.View.extend({ 
    initialize: function (options) { 
     this.collection = options.collection; 
     this.collection.on('add', this.render, this); 
     // Getting the data from JSON-server 
     this.collection.fetch({ 
      success: function (res) { 
       _.each(res.toJSON(), function (item) { 
        console.log("GET a model with " + item.id); 
       }); 
      }, 
      error: function() { 
       console.log("Failed to GET"); 
      } 
     }); 
    }, 
    render: function() { 
     var self = this; 
     this.$el.html(''); 
     _.each(this.collection.toArray(), function (cv) { 
      self.$el.append((new ResumeView({model: cv})).render().$el); 
     }); 
     return this; 
    }   
}); 

Der obige Code funktioniert perfekt und macht genau das, was ich brauche - ein Ein Array von Modellen wird von meinem lokalen JSON-Server und jedem mo abgerufen del wird in einer Sammlungsansicht angezeigt. Das Problem beginnt jedoch, wenn ich versuche, über meinen Link in der obigen Vorlage zu navigieren. Hier kommt der Router:

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     '': home, 
     'resumes/:id': 'showResume' 
    }, 
    initialize: function (options) { 
     // layout is set in main.js 
     this.layout = options.layout 
    }, 
    home: function() { 
     this.layout.render(new ResumeList({collection: resumes})); 
    }, 
    showResume: function (cv) { 
     this.layout.render(new ShowResume({model: cv})); 
    } 
}); 

und schließlich die ShowResume Ansicht:

var ShowResume = Backbone.View.extend({ 
    initialize: function (options) { 
     this.model = options.model; 
     this.template = _.template($('#full-resume').html()); 
    }, 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
    } 
}); 

ich nicht die Vorlage für diese Ansicht vorsah, weil es recht groß ist, aber der Fehler ist folgende: wenn ich versuche, Um zu einem Link zu navigieren, versucht eine Ansicht zu rendern, aber gibt mir den folgenden Fehler zurück: Uncaught TypeError: this.model.toJSON is not a function. Ich vermute, dass meine showResume Methode im Router ungültig ist, aber ich kann nicht wirklich bekommen, wie man es richtig macht.

Answer 1

Sie übergeben die Zeichenfolge id der URL 'resumes/:id' als Modell der Ansicht.

Dies sollte es lösen.

showResume: function (id) { 
    this.layout.render(new ShowResume({ 
     model: new Backbone.Model({ 
      id: id, 
      profession: "teacher" // you can pass data like this 
     }) 
    })); 
} 

Aber Sie sollten die Daten in der Steuerung holen und entsprechend in der Ansicht reagieren.

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     '*otherwise': 'home', // notice the catch all 
     'resumes/:id': 'showResume' 
    }, 
    initialize: function(options) { 
     // layout is set in main.js 
     this.layout = options.layout 
    }, 
    home: function() { 
     this.layout.render(new ResumeList({ collection: resumes })); 
    }, 
    showResume: function(id) { 
     // lazily create the view and keep it 
     if (!this.showResume) { 
      this.showResume = new ShowResume({ model: new Backbone.Model() }); 
     } 

     // use the view's model and fetch 
     this.showResume.model.set('id', id).fetch({ 
      context: this, 
      success: function(){ 
       this.layout.render(this.showResume); 
      } 
     }) 

    } 
}); 

---

Auch ist nicht notwendig, da this.model = options.model;Backbone automatically picks upmodel, collection, el, id, className, tagName, attributes und events, mit ihnen die Ansicht verlaufen.