介绍 来自API(backbone能做什么?)

  当我们开发含有大量Javascript的web应用程序时,首先你需要做的事情之一便是停止向DOM对象附加数据。
  通过复杂多变的jQuery选择符和回调函数很容易创建Javascript应用程序,包括在HTML UI,Javascript逻辑和数据之间保持同步,都不复杂。
  但对富客户端应用来说,良好的架构通常是有很多益处的。

  通过Backbone,你可以将数据呈现为 Models, 你可以对模型进行创建,验证和销毁,以及将它保存到服务器。
  任何时候只要UI事件引起模型内的属性变化,模型会触发"change"事件;
  所有显示模型数据的 Views 会接收到该事件的通知,继而视图重新渲染。 你无需查找DOM来搜索指定id的元素去手动更新HTML。
  — 当模型改变了,视图便会自动变化。

  某种意义上说,在用javaScript来创建web项目时,Backbone试图定义一组最小而高效的集合,
  包括了数据结构(models(模型) 和 collections(集合))和用户接口(views(视图) 和 URLS)。
  在web开发环境里,到处都是框架(帮你写好了一切),不过这些库需要你的网站在构建的时候符合该框架的样子,风格,默认的行为。
  但是,Backbone还是作为一个工具,让你可以随心所欲的设计你的网站。

  Why Backbone ? 说实话我也不知道为什么想去研究它。选择有很多 Angular,React,Vue,Ember,Knockout,Spine,Meteor等等。。。

  况且Backbone已经在web混了很久了。如果真的需要一个理由:可能是因为它短小精悍的身材被吸引吧!(手动滑稽)

  By the way 我现在手头上有一本书 : 『Backbone.js Cookbook』-Vadim Mirgorod(乌克兰)

  磨叽半天 让我们开始吧!哈哈

  首先引用 ,这里就用传统方法来认识吧:

     ...
<div id="hello"></div>
<div id="renderHere"></div>
<script src="js/main.js"></script>
...

  此处太懒了 没写在文档加载完成函数里 直接放在文档底部啦...

  main.js =>

     /**
* 模块声明方式
*/
var InvoiceModel = Backbone.Model.extend({
default: {
price: 0,
quantity: 0
},
calculateAmount: function() {
return this.get('price') * this.get('quantity');
}
})

  赋值 =>

 var invoiceItemModel = new InvoiceModel({
price: 2,
quantity: 3
})

  创建视图 =>

     /**
* 视图View
*/
var PreviewInvoiceItemModel = Backbone.View.extend({
temlate: _.template('\
price : <%= price %>.\
quantity : <%= quantity %>.\
Amount : <%= amount %> .\
'),
render: function() {
var html = this.temlate({
price: this.model.get('price'),
quantity: this.model.get('quantity'),
amount: this.model.calculateAmount()
})
$(this.el).html(html);
}
})

  这里用到了underscore里面的模板方法 更多详情移步API 中文版 英文版

  视图引用模块 =>

     var previewInvoiceItemModel = new PreviewInvoiceItemModel({
model: invoiceItemModel,
el: '#renderHere' })

  渲染 =>

     previewInvoiceItemModel.render();

  或者

     var invoiceItemModel2 = new InvoiceModel();
invoiceItemModel2.set({ price: 10, quantity: 20 });
var previewInvoiceItemModel2 = new PreviewInvoiceItemModel({
model: invoiceItemModel2,
el: '#renderHere'
})
previewInvoiceItemModel2.render();

  输出内容为:(此处假装在页面上^_^)

  price : 2. quantity : 3. Amount : 6 .
  price : 10. quantity : 20. Amount : 200 
 
  此处待承接下文...

BackboneJS and UnderscoreJS的更多相关文章

  1. 使用requireJS,backboneJS,和underscoreJS完成自定义模板封装

    使用requireJS,backboneJS,和underscoreJS完成自定义模板封装 原来的代码 当我们进行一个列表的数据填充的时候,是这样做的: //获取美食列表 function getFo ...

  2. backbonejs mvc框架的增删查改实例

    一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https://github.com/nonocast/e ...

  3. 《BackboneJS框架的技巧及模式》(4)完结篇

    <BackboneJS框架的技巧及模式>(4)完结篇 本文紧接第二部分:<BackboneJS框架的技巧及模式(3)> 作者:chszs,转载需注明.博客主页:http://b ...

  4. 不学就吃亏的underscorejs类库学习示例 ——(集合篇)

    underscorejs是一个很不错的类库,我的很多项目都引用了这个类库,的确可以带来很多方便. 记得我当初学的时候,看underscorejs的api是看的一知半解的,甚至不明白api里的conte ...

  5. 《BackboneJS框架的技巧及模式》(2)

    <BackboneJS框架的技巧及模式>(2) 本文紧接第一部分:<BackboneJS框架的技巧及模式(1)> 作者:chszs,转载需注明.博客主页:http://blog ...

  6. backbonejs mvc框架

    backbonejs mvc框架的增删查改实例 一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https ...

  7. BackboneJS 源码注释

    Backbone 作者在源码中做了很好的注释,这里只是锦上添花,补充一些个人的理解而已. // Backbone.js 1.2.3 // (c) 2010-2015 Jeremy Ashkenas, ...

  8. 三大JavaScript框架对比——AngularJS、BackboneJS和EmberJS

    <三大JavaScript框架对比——AngularJS.BackboneJS和EmberJS> 本文转载自  作者:chszs,博客主页:http://blog.csdn.net/chs ...

  9. underscorejs 源码走读笔记

    Underscore 简介 Underscore 是一个JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象.它弥补了部分jQuery ...

随机推荐

  1. GNS3配置SecureCRT

    C:\SecureCRT\SecureCRT.exe /script D:\GNS3\DyRouter.vbs /T /telnet 127.0.0.1 %p "D:\Program Fil ...

  2. Java设计模式—单例设计模式(Singleton Pattern)全然解析

    转载请注明出处:http://blog.csdn.net/dmk877/article/details/50311791 相信大家都知道设计模式,听的最多的也应该是单例设计模式,这种模式也是在开发中用 ...

  3. C++中使用Json的方法

    使用 C++ 处理 JSON 数据交换格式 一.摘要 JSON 的全称为:JavaScript Object Notation,顾名思义,JSON 是用于标记 Javascript 对象的,JSON官 ...

  4. UVA 1397 - The Teacher&#39;s Side of Math(高斯消元)

    UVA 1397 - The Teacher's Side of Math 题目链接 题意:给定一个x=a1/m+b1/n.求原方程组 思路:因为m*n最多20,全部最高项仅仅有20.然后能够把每一个 ...

  5. 2016/1/14 java随机数生成

    1.Math库里的static(静态)方法random() 该方法的作用是产生0到1之间(包括0,但不包括1)的一个double值. double rand = Math.random(); 2.通过 ...

  6. 【bzoj4590】[Shoi2015]自动刷题机

    因为解一定是单调的,n越小切的题越多,这是可以肯定的,那么直接二分答案 #include<algorithm> #include<iostream> #include<c ...

  7. 加密散列算法——SHA-1

    与MD5算法类似,SHA-1算法也是在接收到消息后产生消息摘要,能够用来验证数据的完整性. 不同的是SHA1会产生一个160位的消息摘要(MD5产生的是128位). 其它的性质之类的不多说(请參考前面 ...

  8. 学习MAP 地图好地址

    http://www.cnblogs.com/beniao/archive/2010/01/13/1646446.html Bēniaǒ成长笔记在IT江湖里我不是一名老手,我只是一名普通的程序员,愿意 ...

  9. 【POJ 1330】 Nearest Common Ancestors

    [题目链接] 点击打开链接 [算法] 倍增法求最近公共祖先 [代码] #include <algorithm> #include <bitset> #include <c ...

  10. CodeFirst建模:DataAnotation

    示例一 新建一个控制台应用程序,并安装entityframework 新建一个文件Blog.cs类,输入以下代码: using System.ComponentModel.DataAnnotation ...