2

我很困惑，因为我一直在尝试找出如何设置Backbone.js项目。 这就是我所拥有的，我只需要包含脚本，然后呢？这就是我迷路的地方，我很确定仅仅打开我创建的文件不会运行项目，对吗？而且我正在关注Thomas Davis的视频教程，但该教程不包括如何设置Backbone.js或如何运行项目。我注意到我们的url. 我错过了什么？另外，如果您对像我这样的初学者有一些好的材料。天呐！

这是我正在使用的代码： 

    <div id="page">
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
    <script>
        var View = Backbone.View.extend({
            el: '.page',
            render: function (){
                this.$el.html('Hello World');
            }
        });


        var Router = Backbone.Router.extend({
        routes: {
            '' : 'home'
            }
        });

        var view = new View();
        var router = new Router();
        router.on('route:home', function ()
        {
            view.render();
        });

        Backbone.history.start();
    </script>

</body>
</html>
4

1 回答 1

2

设置骨干

您应该在 html 中包含undescore.js,jquery.js和backbone.js，然后像普通 Web 应用程序一样简单地运行该文件。

如果您熟悉 apache，请将您的应用程序放在 web 根目录下并访问http://localhost/my_app/.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="js/underscore.js"></script>
        <script src="js/jquery.js"> </script>
        <script src="js/backbone.js"></script>
    </body>
</html>

underscorejs从这里下载并放入js文件夹。

jquery 在这里下载。

Backbone 在这里下载。

然后将您的主干函数放在外部 JavaScript 文件中，并将其包含在主干.js 之后。

使固定

你的代码有问题。您使用类符号定义您的元素，id但尝试使用类符号进行访问。

所以更换，

var View = Backbone.View.extend({
        el: '.page',
        render: function (){
             this.$el.html('Hello World');
        }
});

和，

var View = Backbone.View.extend({
        el: '#page',
        render: function (){
             this.$el.html('Hello World');
        }
});

你必须使用el: '#page'.

您应该在包含主干.js 之前包含依赖项。

所以更换，

<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

和，

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
于 2013-09-26T06:14:27.727 回答