0

私はバックボーンルートを学んでいます。バックボーンを使用して小さなアプリを作成しました。しかし、ルートは機能していません。コンソールでこのエラーが発生します

Uncaught TypeError: Cannot read property 'el' of undefined

これが私のコードです

$(function () {
/****************************/
var documents = [
    new Backbone.Model({
        title: 'Title One',
        content: 'This is content for JS module'
    }),
    new Backbone.Model({
        title: 'Title Two',
        content: 'Module Systems Module Systems Module Systems Module Systems Module Systems'
    })
];

var contentsView = Backbone.View.extend({
    tagName: 'ul',
    render: function () {
        _(this.collection).each(function (document) {
            this.$el.append(new DocumentListView({model: document}).render().el);
        }, this);
    }
});

var DocumentListView = Backbone.View.extend({
    tagName: 'li',
    render: function () {
        this.$el.html(this.model.get('title'));
        return this;
    }
});

var DocumentRouter = Backbone.Router.extend({
    routes: {
        'contents': 'contents'
    },
    contents: function () {
        $('body').html(new contentsView({collection: documents}).render().el);
    }
});

var router = new DocumentRouter();
Backbone.history.start();

router.navigate('contents', {trigger:true});
/****************************/
});

これは、コンソールメッセージに従って上記のエラーが発生する行です

$('body').html(new contentsView({collection: documents}).render().el);

どうすればこの問題を解決できますか？

4

1 に答える 1

0

これは、contentsViewレンダリング関数から返す必要があります。

var contentsView = Backbone.View.extend({
        tagName: 'ul',
        render: function () {
            _(this.collection).each(function (document) {
                this.$el.append(new DocumentListView({model: document}).render().el);
            }, this);
         return this;
        }
    });

また、contentsviewをbodyに追加する場合は、次のように使用します$（'body'）。append（new contentsView（{collection：documents}）。render（）。$ el）;

contentsViewがbodyタグを対象とした唯一のコンテンツである場合は、次のような構成を使用してください

var contentsView = Backbone.View.extend({
            el : 'body',
            tagName: 'ul',
            render: function () {
                _(this.collection).each(function (document) {
                    this.$el.append(new DocumentListView({model: document}).render().el);
                }, this);
             return this;
            }
        });
contentsView.render();
于 2012-10-27T16:04:04.363 に答える