前端mvc框架backbone.js入門[轉]

時間 2019-11-10

標籤前端 mvc 框架 backbone.js backbone 入門欄目 JavaScript 简体版

原文原文鏈接

原文地址：http://www.cnblogs.com/zhjh256/p/6083618.htmljavascript

關於backbone.js的優缺點，這裏就不詳談了，網上關於這方面的討論不少了，並且各類框架之因此長久生存，一般都是有其特定優點和擅長點的。html

使用backbone.js做爲前端框架的應用一般都是html和javascript分離的，也可參考requirejs的結構。前端

本文介紹backbone.js的入門教程，經過本篇，讀者應該可以比官方API更快和更好的理解基於backbone.js的應用。java

首先，定義一個html宿主頁面：jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>backbone js test</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jsrender.js"></script>
    <script type="text/javascript" src="underscore.js"></script>
    <script type="text/javascript" src="backbone.js"></script>
    <script type="text/javascript" src="backbone_getting_start.js"></script>
</head>
<body>
<a href="#!/hello">測試route</a>
<div id="result"></div>
<script type="text/x-jsrender" id="hello-container-template">
    <h3>{{:name}},{{:message}}</h3>
    <div id="btnClick">測試backbone單擊事件</div>
</script>
</body>
</html>

其次，在專門的backbone_getting_start.js文件中定義MVC結構，以下：web

/**
 * Created by dell on 2016/11/20.
 */
var App = {
    Models: {},
    Views: {},
    Controllers: {},
    Collections: {},
    initialize: function() {
        new App.Controllers.Routes();
        Backbone.history.start(); // 要驅動全部的Backbone程序，Backbone.history.start()是必須的。
    }
};
App.Models.Hello = Backbone.Model.extend({
    urlRoot: function() {
        return '/webend/api.json'; // 得到數據的後臺地址，能夠是函數或者屬性, 隨意定義一個api.json便可，見下文
    },
    initialize: function() {
        this.set({'message':'hello world'}); // 前端定義一個message字段，name字段由後端提供, 後臺若是包含一樣字段，會自動覆蓋，不然合併。
    }
});
App.Views.Hello = Backbone.View.extend({
    el: "#result",  //定義結果view的容器，只要DOM元素（# . element）均可以，通常使用class或者id
    template: function() {
        return $.templates("#hello-container-template");  // 返回template，須要是函數
    },
    events: {
        "click #btnClick": "btnClick"  // 定義this.el內DOM的事件
    },
    initialize: function(options){
        this.options = options;
        this.bind('change', this.render);
        this.model = this.options.model;
    },
    render: function(){ // render方法，目標只有兩個：填充this.$el，返回this以便鏈式操做。若是是this.el，則須要el.innerHtml
        this.$el.html(this.template().render(this.model));
        return this;
    },
    btnClick: function() {
        alert("測試backbone js events功能！");
    }
});
App.Controllers.Routes = Backbone.Router.extend({  //早期的版本使用Controller,當前版本已經去掉了Controller
    routes: {
        "!/hello" : "hello",//使用#!/hello驅動路由
    },
    hello : function() {
        //新建一個模型，模型向後端請求更新內容成功後根據模型渲染新頁面
        var helloModel = new App.Models.Hello();
        helloModel.fetch({
            success: function(model){
                var helloView = new App.Views.Hello({model: model.toJSON()}); //model須要調用toJSON，不然返回值放置在model.attribute
                helloView.trigger('change');
            }
        })
    }});
App.initialize();

定義後臺服務，以返回json的靜態文件爲例：json

{"name":"from backend restful api","message":"return from restful api too"}

打開backbone_getting_start.html後端

點擊上述連接，以下：api

點擊"測試backbone單擊事件"，以下：前端框架

相關標籤/搜索

每日一句

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