Backbone.js學習筆記 Hello World!

時間 2020-02-27

標籤 backbone.js backbone 學習筆記 hello world 欄目 JavaScript 简体版

原文原文鏈接

使用Backbone.js 和 MVC 架構建立一個典型的Hello world項目。雖然是「殺雞用牛刀了」，畢竟是我第一次使用Backbone.jshtml

依賴

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 屬性:jquery

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 函數：app

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 運行的結果。this

渲染 homeView，咱們使用 this.$el，這是一個 jQuery 對象，它指向 el 的屬性，使用 jQuery.html() 函數使用 this.template() 的結果替換 HTML。下面是完整的 homeView 代碼：code

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

如今咱們返回到 router，添加兩行到 home 函數：router

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! 輸出。htm

最後，啓動總體 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。