javascript - backbone.js this.model は未定義のワインアプリケーションの例

Question

私は初めてバックボーン js を学習しており、ワイン アプリの例を動作させようとしています。データベースから正常にプルされており、リスト ビューにはユーザーのリストが表示されますが、WineDetails を呼び出すとエラーがスローされます。

コードは次のとおりです。

// Models
window.Wine = Backbone.Model.extend();

window.WineCollection = Backbone.Collection.extend({
  model:Wine,
  url:"../api/users"
});


// Views
window.WineListView = Backbone.View.extend({

  tagName:'ul',

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

  render:function (eventName) {
    _.each(this.model.models, function (wine) {
        $(this.el).append(new WineListItemView({model:wine}).render().el);
    }, this);
    return this;
  }

});

window.WineListItemView = Backbone.View.extend({

  tagName:"li",

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

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

});

window.WineView = Backbone.View.extend({

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

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

});


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

  routes:{
    "":"list",
    "users/:id":"wineDetails"
  },

  initialize:function () {
    this.wineList = new WineCollection();
    this.wineListView = new WineListView({model:this.wineList});

  },

  list:function () {
    this.wineList.fetch();
    $('#sidebar').html(this.wineListView.render().el);
  },

  wineDetails:function (id) {
    this.wine = this.wineList.get(id);
    this.wineView = new WineView({model:this.wine});
    $('#content').html(this.wineView.render().el);
  }
});

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

そしてhtml

<div id="header"><span class="title">Backbone Cellar</span></div>

<div id="sidebar"></div>

<div id="content">
  <h2>Welcome to Backbone Cellar</h2>
  <p>
  This is a sample application part of of three-part tutorial showing how to build a CRUD    application with Backbone.js.
  </p>
</div>

<!-- Templates -->
<script type="text/template" id="tpl-user-list-item">
  <a href='#users/<%= user_id %>'><%= user_id %></a>
</script>

<script type="text/template" id="tpl-user-details">
<div class="form-left-col">

  <label>Name:</label>
  <input type="text" id="user_id" name="user_id" value="<%= user_id %>" required/>

</div>

</script>

</div>

そしてfirebugのエラー

TypeError: this.model is undefined
$(this.el).html(this.template(this.model.toJSON()));

_.bindAll(this,"render"); を追加してみました。初期化関数にありますが、違いはありません。