Ошибка метода модели при попытке навигации

Question

У меня есть несколько моделей Backbone, которые отображаются в виде коллекции, а также у меня есть маршрут, который должен отображать представление этой модели. Так, сюда приходят взгляды

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> 

вид Коллекция:

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; 
    }   
}); 

Код выше работает отлично и делает именно то, что мне нужно - An массив моделей выбирается из моего локального JSON-сервера и каждый mo del отображается в виде коллекции. Однако проблема начинается, когда я пытаюсь перемещаться по моей ссылке в шаблоне выше. Здесь приходит маршрутизатор:

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})); 
    } 
}); 

и, наконец, ShowResume вид:

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())); 
    } 
}); 

Я не предоставил шаблон для этой точки зрения, потому что это довольно большой, но ошибка заключается в следующем: каждый раз, когда я пытаюсь для перехода к ссылке, просмотр пытается выполнить рендеринг, но возвращает мне следующую ошибку: Uncaught TypeError: this.model.toJSON is not a function. Я подозреваю, что мой метод showResume в маршрутизаторе недействителен, но я не могу получить способ, чтобы он работал правильно.

Answer 1

Вы передаете строку id с адресом 'resumes/:id' в качестве модели представления.

Это должно решить проблему.

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

Но вы должны получать данные в контроллере и соответственно реагировать на представление.

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); 
      } 
     }) 

    } 
}); 

---

Кроме того, this.model = options.model; является ненужным, как Backbone automatically picks upmodel, collection, el, id, className, tagName, attributes и events, расширяя вид с ними.