Question

我正在尝试为我的收藏品创建第二个视图。

main.js

window.App = {
    Models: {},
    Collections: {},
    Views: {},
    Routers: {},
    init: function () {
        console.log('Hello from Backbone!');
        var book = new this.Models.BookModel({
            title: 'JS is awesome',
            author: 'Douglas Crackford'
        });

        var book2 = new this.Models.BookModel({
            title: 'JS the good parts',
            author: 'Douglas Crackford'
        });

        var bookCollection = new this.Collections.BookCollection;
        bookCollection.add([book, book2]);


        var view = new this.Views.BookView();
        //next line creates error 
        var peopleView = new this.Views.PeopleView();
    }
};

$(document).ready(function () {
    App.init();
});

BookView.js

App.Views = App.Views || {};

(function () {
    App.Views.BookView = Backbone.View.extend({

        el: $('#footer'),

        template: _.template($ ('#books').html()),

        initialize: function () {
            console.log('BookView initialized');
        },

        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
        }

    });
})();

PeopleView.js

App.Views = App.Views || {};

(function () {
    App.Views.PeopleView = Backbone.View.extend({

       tagName: 'ul',

       initialize: function() {
           console.log('peopleView init')
       }

    });
})();

创建输出

Hello from Backbone!                                main.js:8
BookView initialized                                BookView.js:11
Uncaught TypeError: undefined is not a function     main.js:24

我发现这个错误很奇怪。如果我将代码从BookView复制到PeopleView并且只调用这个新的PeopleView（并编辑出BookView），我会得到相同的错误，而代码看起来有效，因为它已执行（请参阅console.log）。我觉得这很奇怪。我错过了哪一部分？

编辑：

添加图片以显示执行顺序。

enter image description here

Answer 1

问题是范围之一。

调用init方法时，会在Window范围内调用它，因此this的值为Window。您可以在init方法中console.log(this)查看。

你可以做的事情很多。当您将App附加到window对象时，可以直接调用它：

  var bookCollection = new App.Collections.BookCollection;

或者您可以将init的调用绑定到App对象：

App.init.call(App);

这会将this的值绑定到call的第一个参数。

您可以通过函数doc ready method直接绑定来进一步简化：

$(document).ready(App.init.bind(App));

More Info On Scopes

创建第二个（集合）视图时出现主干错误

1 个答案: