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

models/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ファイルの div 内にテンプレートがあります.offers(この時点では、データをレンダリングしようとしているわけではなく、テンプレートだけです:

<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 (Plural) であるため、代わりにここでコレクションを渡すことを期待します..

編集

直接モデルではなく、モデルの新しいインスタンスを渡す必要があります。

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

また

var pHModel = new PH.Offer();

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