骨干网类型错误的观点是不是构造 [英] Backbone TypeError view is not a constructor

问题描述

我想从'Backbone.js的开发应用书的例子。我转载低于code的一部分。当app.js被调用时，我得到了LibraryView（library.js）的renderBook方法下面的错误。

I'm trying an example from 'Developing Backbone.js applications' book. I've reproduced part of the code below. When app.js is invoked, I get the following error in renderBook method of LibraryView (library.js).

类型错误：app.BookView不是构造

TypeError: app.BookView is not a constructor

有人能帮助我吗？

//信息查看书（网站/ JS /视图/ book.js）

// View for book (site/js/views/book.js)

var app = app || {};

app.BookView = Backbone.View.extend({
    tagName: 'div',
    className: 'bookContainer',
    template: _.template( $('#bookTemplate').html() ),

    render: function() {
        // tmpl is a function that takes a JSON object and returns html

        // this.el is what we defined in tagName. use $el to get access 
        // to jQuery html() function
        this.$el.html( this.template( this.model.toJSON() ));

        return this;
    }
});

//查看图书馆（网站/ JS /视图/ library.js）

//View for library (site/js/views/library.js )

var app = app || {};

app.LibraryView = Backbone.View.extend({
    el: '#books',

    initialize: function( initialBooks ) {
        this.collection = new app.Library( initialBooks );
        this.render();
    },

    // render library by rendering each book in its collection
    render: function() {
        this.collection.each(function( item ) {
            this.renderBook( item );
        }, this );
    },

    // render a book by creating a BookView and appending the
    // element it renders to the library's element
    renderBook: function( item ) {
        var bookView = new app.BookView({
            model: item
        });
        this.$el.append( bookView.render().el );
    }
});

//主要的应用（网站/ JS / app.js）

// The main app (site/js/app.js)

var app = app || {};

$(function() {
    var books = [
        { title: 'JavaScript: The Good Parts', author: 'Douglas Crockford', 
          releaseDate: '2008', keywords: 'JavaScript Programming' },
        { title: 'The Little Book on CoffeeScript', author: 'Alex MacCaw', 
          releaseDate: '2012', keywords: 'CoffeeScript Programming' },
        { title: 'Scala for the Impatient', author: 'Cay S. Horstmann', 
          releaseDate: '2012', keywords: 'Scala Programming' },
        { title: 'American Psycho', author: 'Bret Easton Ellis', 
          releaseDate: '1991', keywords: 'Novel Splatter' },
        { title: 'Eloquent JavaScript', author: 'Marijn Haverbeke', 
          releaseDate: '2011', keywords: 'JavaScript Programming' }
    ];

    new app.LibraryView( books );
});

HTML文件包括所有下列顺序的JS：

The html file includes all the JS in the following order:

<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore-min.js"></script>
<script src="js/lib/backbone-min.js"></script>
<script src="js/models/book.js"></script>
<script src="js/collections/library.js"></script>
<script src="js/views/book.js"></script>
<script src="js/views/library.js"></script>
<script src="js/app.js"></script>

感谢。

推荐答案

尝试包装你的图书查看＆放大器;在onload事件LibraryView声明 $（函数（）{} 块。那是我能想到的唯一的事情。Backbone.View.Extend是一个函数，因此需要执行

Try wrapping your BookView & LibraryView declarations in onload $(function() {} blocks. Thats the only thing I can think of. Backbone.View.Extend is a function, and thus needs to be executed.

您目前正在做的方式，要设置app.BookView等于函数Backbone.View.Extend，而不是通过函数的返回值。

The way your currently doing it, you are setting app.BookView equal to the function Backbone.View.Extend, not the value returned by the function.

这篇关于骨干网类型错误的观点是不是构造的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！