Backbone.js进修笔记 Hello World!

2024年2月1日 192次阅读 来源: _我已经从中二毕业了

运用Backbone.js 和 MVC 架构建立一个典范的Hello world项目。虽然是“杀鸡用牛刀了”，毕竟是我第一次运用Backbone.js

依靠

  • jQuery 1.9.1
  • Undersore.js 1.5.0
  • Backbone.js

最先

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>backbone一样平常演习</title>
</head>
<body>
<div></div>
<script src="js/jquery.min.js"></script>
<script src="js/Underscore.min.js"></script>
<script src="js/backbone-min.js"></script>

<script>
    // 开启Backbone进修之旅
</script>
</body>
</html>

在 extend 挪用里设置指定的 routes 属性:

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

Backbone中routes 属性须要下面的花样： ‘path/:param’: ‘action’，它完成了是当URl是 filename#path/param时， 触发名为action 的函数（在Router 对象里定义）。然后增加一个 home 路由：

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

如今我们须要增加一个 home 函数：

var router = Backbone.Router.extend({
    routes: {
        ' ': 'home'
    }
    ‘home’: function (){
        // 衬着 HTML
    }
});

增加建立和衬着 View 的逻辑。如今先定义 homeView:

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

然后给 homeView 增加属性

var homeView = Backbone.View.extend({    
    el: 'body',
    teplate: _.template('Hello world!')
});

el 是一个保留 jQuery 选择器的字符串，也能够运用’.’作为类和’#’作为ID名。template属性被赋值给传入 Hello World 的 Underscore.js 函数 template 运转的效果。

衬着 homeView， 我们运用 this.$el， 这是一个 jQuery 对象，它指向 el 的属性，运用 jQuery.html() 函数运用 this.template() 的效果替代 HTML。 下面是完整的 homeView 代码：

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

如今我们返回到 router，增加两行到 home 函数：

var router = Backbone.Router.extend({
        routes: {
            '': 'home'
        },
        initialize: function (){
            // 一些在对象初始化的时刻实行的代码
        },
        home: function (){
            this.homeView = new homeView;
            this.homeView.render();
        }
    });

第一行建立了一个 homeView 对象而且赋值给 router 的 homeView 属性。第二行挪用 homeView 对象的 render() 要领，触发 Hello World! 输出。

末了，启动团体 Backbone 运用，为了保证 Dom 完整加载， 用 $(function (){}) 包装器挪用 new router：

var app;
$(function (){
    app = new router;
    Backbone.history.start();
});

完整DEMO

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>backbone一样平常演习</title>
</head>

<body>

<div></div>

<script src="js/jquery.min.js"></script>
<script src="js/Underscore.min.js"></script>
<script src="js/backbone-min.js"></script>

<script>
    var app;
    var router = Backbone.Router.extend({
        routes: {
            '': 'home'
        },
        initialize: function (){
            // 一些在对象初始化的时刻实行的代码
        },
        home: function (){
            this.homeView = new homeView;
            this.homeView.render();
        }
    });

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

    $(function (){
        app = new router;
        Backbone.history.start();
    });

</script>
</body>
</html>
    原文作者：_我已经从中二毕业了
    原文地址: https://segmentfault.com/a/1190000002494005
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞