前端mvc框架backbone.js入门[转]

时间：2021-01-18 16:08:00

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

关于backbone.js的优缺点，这里就不详谈了，网上关于这方面的讨论很多了，而且各种框架之所以长久生存，通常都是有其特定优势和擅长点的。

使用backbone.js作为前端框架的应用通常都是html和javascript分离的，也可参考requirejs的结构。

本文介绍backbone.js的入门教程，通过本篇，读者应该能够比官方API更快和更好的理解基于backbone.js的应用。

首先，定义一个html宿主页面：

<!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结构，如下：

/**

 * 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的静态文件为例：

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

打开backbone_getting_start.html

前端mvc框架backbone.js入门[转]

点击上述链接，如下：

前端mvc框架backbone.js入门[转]

点击"测试backbone单击事件"，如下：

前端mvc框架backbone.js入门[转]

相关文章