Question

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文件中有一个模板，位于我的.offers div中（我甚至不想渲染数据，此时只是模板：

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

我为文字墙道歉，我对此非常陌生。在我继续前进之前，试着绕过这个简单的解决方案！

谢谢！

Answer 1

初始化方法已经到位

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 （Plural），我希望在这里传递一个集合..

修改的

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

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

或

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

对Backbone.js结构感到困惑 - 试图引导一个简单的应用程序

1 个答案: