移動中のモデルメソッドのエラー

Question

私はいくつかのバックボーンモデルをコレクションビューでレンダリングし、そのモデルのビューをレンダリングするルートも持っています。だから、ここに来ビュー

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> 

Collectionビュー：

上記のコードは完璧に動作し、私は必要なものを正確に行い

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

- モデルの配列がローカルの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

URL 'resumes/:id'の文字列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として不要です。