0

コレクションからすべてのウェイターをレンダリングしたいのですが、コンソールにはまだエラーが表示されます:

キャッチされていない TypeError: 未定義のメソッド 'toJSON' を呼び出せません

これは私のコードです:

 (function() {

    window.App = {

        Models: {},
        Views: {},
        Collections: {}

    };

    window.template = function(id) {

        return _.template( $('id' + id).html() );

    },

// ウェイターモデル

    App.Models.Waiter = Backbone.Model.extend({

        defaults: function() {
            return {
                title: 'Waiter Name',
                id: []
            };
        }
    });

// WAITERS コレクションのリスト

   App.Collections.Waiters = Backbone.Collection.extend({

       model: App.Models.Waiter
   });

// すべてのウェイターを表示

   App.Views.Waiters = Backbone.View.extend({

       tagName: 'ul',

       render: function() {

           this.collection.each(function(waiter) {

               var waiterView = new App.Views.Waiter({ model: waiter });

               this.$el.append(waiterView.render().el);

           }, this);

           return this;
       }
   });

// 一人の視点

    App.Views.Waiter = Backbone.View.extend({

        tagName: 'li',

        template: _.template("<%= title %><%= id %>"),

        render: function() {

            this.$el.html( this.template(this.model.toJSON()) );

            return this;

        },
    });


       waitersCollection = new App.Collections.Waiters([
           {
               title: 'ferko fristansky',
               id: 2
           },
           {
               title: 'ferko bandaska',
               id: 3
           },
           {
               title: 'fvwerv fristansky',
               id: 4
           }    

       ]);

       var waitersView = new App.Views.Waiter({ collection: waitersCollection });

        $(document.body).append(waitersView.render().el);


})();
4

1 に答える 1

1

waiterViewコレクションであなたを作成しています：

var waiterView = new App.Views.Waiter({ collection: waitersCollection });

App.Views.Waiterモデルベースのビューです。つまり、それthis.modelはundefinedあなたの中App.Views.Waiterにあるので、これは失敗します:

this.$el.html( this.template(this.model.toJSON()) );
// this is undefined -------------^^^^^

App.Views.Waitersおそらく代わりに作成したいでしょう：

var waitersView = new App.Views.Waiters({ collection: waitersCollection });

次に、 内では、コレクション内のモデルごとにApp.Views.Waiters1 つではなく 1 つ作成します。App.Views.Waiternew App.Views.extend({ model: waiter })

render: function() {
    this.collection.each(function(waiter) {
        var waiterView = new App.Views.Waiter({ model: waiter });
        this.$el.append(waiterView.render().el);
    }, this);
    return this;
}

余談ですが、これには注意してください：

App.Models.Waiter = Backbone.Model.extend({
    defaults: {
        title: 'Waiter Name',
        id: []
    }
});

からの値defaultsは浅くコピーされるため、これらのデフォルトを使用するすべてのものはまったく同じid配列を使用することになり、同じ配列を共有する複数のモデルがある場合に奇妙なバグが発生する可能性がありますid。に変更可能な値がdefaultsある場合、通常は代わりに関数を使用して、全員が独自の値を取得できるようにします。

App.Models.Waiter = Backbone.Model.extend({
    defaults: function() {
        return {
            title: 'Waiter Name',
            id: []
        };
    }
});
于 2013-09-15T22:49:27.270 に答える