3

私はbackbone.jsを学習しようとしていますが、jsonをフェッチしてコレクションに追加することに固執しています。コレクションは未定義であり、理由がわかりません。コード：

$(document).ready(function() {
    (function($) {
        //model
        window.Wine = Backbone.Model.extend();

        window.WineCollection = Backbone.Model.extend({
            url: "http://localhost/bootstrap/json.php",
            model: Wine
        });


        //views
        window.WineItemView = Backbone.View.extend({
            template: _.template($("#wine-item-template").html()),
            tagName: 'li',
            render: function() {
                $(this.el).html(this.template(this.model.toJSON()));
                return this;
            }
        });

        window.WineListView = Backbone.View.extend({
            tagName: 'ul',
            initialize: function() {
                this.model.bind('reset', this.render, this);

            },
            render: function() {

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


        window.WineView = Backbone.View.extend({
            template: _.template($('#wine-template').html()),
            render: function() {
                $(this.el).html(this.template(this.model.toJSON()));
                return this;
            }
        });
        //Router
        window.AppRouter = Backbone.Router.extend({
            routes: {
                '': 'home',
                'wines/:id': "wineDetails"
            },
            home: function() {
                this.wineList = new WineCollection();

                this.wineListV = new WineListView({
                    model: this.wineList
                });
                this.wineList.fetch({success: function(){
                    console.log(this.wineList.models); // => 2 (collection have been populated)
                }});
                console.log(this.wineListV);

                $("#winelist").html(this.wineListV.render().el);
            },
            wineDetails: function(id) {
                this.wine = this.wineList.get(id);
                console.log(id);
                this.wineView = new WineView({
                    model: this.wine
                });
                $("#container").empty().html(this.wineView.render().el);
            }
        });


    })(jQuery);

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

json.phpは以下を返します：

[
   {
      "name":"Wine 1",
      "price":"100",
      "status":"available"
   },
   {
      "name":"Wine 1",
      "price":"100",
      "status":"available"
   },
   {
      "name":"Wine 1",
      "price":"100",
      "status":"available"
   }
]

ローカルホストでこれをテストしています。

4

3 に答える 3

5

あなたはばかげたタイプミスをしました：

window.WineCollection = Backbone.Model.extend

する必要があります

window.WineCollection = Backbone.Collection.extend

慣例により、WineListViewクラスはthis.collectionを使用してインスタンスを参照する必要がありWineCollection、Backboneコレクションオブジェクトはアンダースコア反復メソッドを提供するため、代わりに

.each(this.model.models, function(wine) {

行う

this.collection.each(function (wineModel) {
于 2012-07-19T13:17:35.883 に答える
3

変更する必要があります

window.WineCollection = Backbone.Model.extend({
            model: Wine,
            url: "wine.json"

        });

に 

window.WineCollection = Backbone.Collection.extend({
            model: Wine,
            url: "wine.json"

        });
于 2012-07-19T13:30:59.167 に答える
0

SOへようこそ:)これはあなたの最初の質問ですので、思い出深いものにしましょう。コレクションと言うときはundefined、デバッグしやすいように行番号を提供（または強調表示）することができます。initializeメソッド内では、以下の代わりに、必要なオブジェクト_.bindAll(this)（デフォルトはobject）を参照したい場合に入れる必要がwindowあります＃1

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

1

 this.model.each(function (wine) {
     $(this.el).append(new WineItemView({
         model: wine
     }).render().el);
 }, this);

これも試してみてください

 window.WineListView = Backbone.View.extend({
     tagName: 'ul',
     initialize: function () {
         _.bindAll(this);
         this.model.on('reset', this.render);
     },
     render: function () {
         #1
     }
 });

ここで迷子になった場合に備えて、コードのコピーhttp://jsbin.com/axixir/edit#javascript

于 2012-07-19T11:42:32.213 に答える