如何在单独的js文件中创建Backbone View

I'm trying to understand how to modularize the Backbone ToDo tutorial

我试图了解如何模块化Backbone ToDo教程

Originally everything is inside the same file, but if I try to extract to another file:

最初一切都在同一个文件中,但如果我尝试提取到另一个文件:

var TodoView = Backbone.View.extend({
    ...
});

then this throws an error:

然后这会抛出一个错误:

var view = new TodoView({model: todo});

**Uncaught TypeError: undefined is not a function**

It's probably due to a scope issue, but I don't know how to create a reference inside the $(function() so I can create this new object inside the main function.

这可能是由于范围问题,但我不知道如何在$(function()中创建引用,所以我可以在main函数中创建这个新对象。

3 个解决方案

#1

Assuming that your first code part is TodoView.js, and your second code part is app.js.

假设您的第一个代码部分是TodoView.js,而您的第二个代码部分是app.js.

Write your html file like this,

像这样写你的html文件,

<html>
    <head>
        <script type="text/javascript" src="js/TodoView.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
        // your dom
    </body>
</html>

(Edited, at 2015-07-27)

(编辑,2015-07-27)

sorry for my late reply. how about this?

抱歉这么晚才回复。这个怎么样?

<html>
    <head></head>
    <body>
        <!-- your dom -->

        <script type="text/javascript" src="js/TodoView.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

In many case, most javascript codes are appended to just before </body>, so that javascript can use your dom!

在许多情况下,大多数javascript代码都附加在之前,因此javascript可以使用你的dom!

#2

You can use something like require.js to load your external files and manage dependancies.

您可以使用require.js之类的东西来加载外部文件并管理依赖项。

#3

Ok, the solution was to move the script references to the end of the body instead of inside the head tags.

好的,解决方案是将脚本引用移动到正文的末尾而不是head标记内。

I think that the reason is that TodoView.js is making use of templates that were defined in the body, and since the js file was being loaded before the body, the templates were not yet available.

我认为原因是TodoView.js正在使用正文中定义的模板,并且由于js文件在正文之前加载,因此模板尚未可用。

#1