关于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

点击上述链接，如下：

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

前端mvc框架backbone.js入门的更多相关文章

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

    原文地址:http://www.cnblogs.com/zhjh256/p/6083618.html 关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以 ...

  2. 最轻量级的前端Mvc框架backbone

    最轻量级的前端Mvc框架backbone依赖最轻量级的库understore backbone并非将前端再次切分为mvc,而是分为了七大模块,分别是:Events.Model.Collection.R ...

  3. 前端MVC框架Backbone 1.1.0源码分析(一)

    前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...

  4. 前端MVC框架Backbone 1.1.0源码分析系列

    Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代码.而且,在传统的 ...

  5. 前端MVC框架Backbone 1.1.0源码分析(二) - 模型

    模型是什么? Models are the heart of any JavaScript application, containing the interactive data as well a ...

  6. Web前端MVC框架的意义分析

    前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...

  7. .NET轻量级MVC框架：Nancy入门教程(二)——Nancy和MVC的简单对比

    在上一篇的.NET轻量级MVC框架:Nancy入门教程(一)——初识Nancy中,简单介绍了Nancy,并写了一个Hello,world.看到大家的评论,都在问Nancy的优势在哪里?和微软的MVC比 ...

  8. 前端测试框架对比(js单元测试框架对比)

    前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...

  9. Web前端三大框架_angular.js 6.0（二）

    Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0  1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...

随机推荐

  1. Java基础-接口．编写2个接口：InterfaceA和InterfaceB；在接口InterfaceA中有个方法void printCapitalLetter()；在接口InterfaceB中有个方法void printLowercaseLetter()；然 后写一个类Print实现接口InterfaceA和InterfaceB，要求 方法 实现输出大写英文字母表的功能，printLowerca

    #34．编写2个接口:InterfaceA和InterfaceB:在接口InterfaceA中有个方法void printCapitalLetter():在接口InterfaceB中有个方法void ...

  2. java容器详细解析

    前言:在java开发中我们肯定会大量的使用集合,在这里我将总结常见的集合类,每个集合类的优点和缺点,以便我们能更好的使用集合.下面我用一幅图来表示 其中淡绿色的表示接口,红色的表示我们经常使用的类. ...

  3. Android入门(十四)内容提供器-实现跨程序共享实例

    原文链接:http://www.orlion.ga/661/ 打开SQLite博文中创建的 DatabaseDemo项目,首先将 MyDatabaseHelper中使用 Toast弹出创建数据库成功的 ...

  4. javascript运算符——位运算符

    × 目录 [1]二进制 [2]非 [3]与[4]或[5]异或[6]左移[7]右移[8]>>>[9]应用 前面的话 位运算符是非常底层的运算,由于其很不直观,所以并不常用.但是,其速度 ...

  5. HTML5之废弃和更新的元素与属性

    废弃的元素和属性 [1]标签替换 <acronym> 替代:<abbr> <applet> 替代:<embed> 或 <object> &l ...

  6. Cocos2d-x 3.2 学习笔记（六）Layer

    Layer 游戏中的背景容器,Layer类是Node类的一个子类,它实现了触屏事件代理(TouchEventsDelegate)协议. LayerColor是Layer的一个子类,它实现了RGBAPr ...

  7. Java多线程系列--“JUC原子类”04之 AtomicReference原子类

    概要 本章对AtomicReference引用类型的原子类进行介绍.内容包括:AtomicReference介绍和函数列表AtomicReference源码分析(基于JDK1.7.0_40)Atomi ...

  8. Android自动连接指定的wifi，免密码或指定密码

    一.运行时的状态 遇到一个这样的要求:“不进行扫描操作,怎么对指定的免密码WIFI进行连接(之前没有连接过)”,于是动手写了一个Demo,如图所示未连接成功时的状态,第一个编辑框让用户输入SSID,第 ...

  9. G++ 参数介绍(转载)

    g++参数介绍 From: http://www.cnblogs.com/lidan/archive/2011/05/25/2239517.html gcc and g++分别是gnu的c & ...

  10. ListView:The content of the adapter has changed but ListView did not receive a notification终极解决方法

    使用ListView时遇到如下的异常信息: 10-26 18:30:45.085: E/AndroidRuntime(7323): java.lang.IllegalStateException: T ...