1

Backbone 新手，我正在尝试启动并运行一个简单的应用程序。我正在使用 Uglify 运行 Grunt.js，以按以下顺序连接我的所有文件：

  'assets/js/main.min.js': [
    'collections/**/*.js',
    'models/**/*.js',
    'routers/**/*.js',
    'views/**/*.js',
    'app.js',],

我实际上只是在尝试将模板渲染<div>为初学者。我从 Backbone.js todo 应用程序中复制了很多内容。

我非常简单的应用程序文件如下。

视图/offersList.js

var PH = PH || {};

(function ($) {
  'use strict';

  PH.OffersList = Backbone.View.extend({

    el: $('.offers'),

    template: _.template($('#offers-list-template').html()),

    initialize: function () {
      this.model.bind('change', this.render, this);
      this.render();
    },

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

  });
})(jQuery);

模型/offer.js

var PH = PH || {};

(function () {
  'use strict';

  PH.Offer = Backbone.Model.extend({

    defaults: {
      name: "My Offer"
    }

  });
})();

集合/offers.js

var PH = PH || {};

(function () {
  'use strict';

  var Offers = Backbone.Collection.extend({
    model: PH.Offer
  });

  PH.OffersCollection = new Offers();

})();

和我的app.js

var PH = PH || {};

$(function () {
  'use strict';

  // kick things off by creating the `PH`
  new PH.OffersList();

});

我的.html文件中有一个模板，在我的.offersdiv 里面（我什至没有尝试渲染数据，只是此时的模板：

<ul class="offers">
  <script id="offers-list-template" type="text/x-mustache-template">
    <h1>Offers List</h1>
    <p>Offers would go here</p>
  </script>
</ul>

似乎模型尚未绑定或未实例化。我得到一个

Uncaught TypeError: Cannot call method 'bind' of undefined就行了this.model.bind("change", this.render, this), this.render();

我为文字墙道歉，我对此很陌生。在我继续之前，试图围绕这个简单的解决方案进行思考！

谢谢！

4

1 回答 1

2

初始化方法有这个

this.model.bind('change', this.render, this);

所以它期望一个模型被传递到这里的视图中

  // kick things off by creating the `PH`
  new PH.OffersList();

因为您没有将模型传递给视图..

model is set to undefined它抛出了一个错误

 new PH.OffersList({model: offersModel } );

但是因为这是您正在谈论的OffersList （复数），所以我希望在这里传递一个集合。

编辑

您需要传入模型的新实例，而不是直接模型。

PH.OffersList({ model: new PH.Offer() });

或者

var pHModel = new PH.Offer();

PH.OffersList({ model: pHModel  });
于 2013-05-21T20:17:31.433 回答