有哪些值得推荐的 backbone.js 源码学习资料

来源：蜘蛛抓取(WebSpider) 时间：2015-01-17 01:59 标签： backbone.js todo
Backbone.js学习笔记，你值得拥有 – ice.Kwok | 查问题
汇聚最新编程技术，编程问题一网打尽
& Backbone.js学习笔记，你值得拥有 – ice.Kwok
Backbone.js学习笔记，你值得拥有 – ice.Kwok
[作者： 分类： ]
What is Backbone.js?
backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jquery和underscore的一个js框架。主要组成：1.model：创建数据，进行数据验证，销毁或者保存到服务器上2.collection：可以增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存 models的集合类3.view：绑定html模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等优势：1. 将数据和界面很好的分离开来。2. 将事件的绑定很好的剥离出来，便于管理和迭代。3. 使得Javascript程序的模块化更加清晰、明了。应用场景：最适合的应用场景是单页面应用，并且页面上有大量数据模型，模型之间需要进行复杂的信息沟通。
简单的一个Hello World实例
1 &!DOCTYPE html& 2 &html& 3 &head& 4
&title&Hello World&/title& 5 &/head& 6 &body& 7 &button id=”btncheck”&测试一下&/button& 8 &ul id=”world-list”& 9 &/ul&10 &/body&11 &script src=”/ajax/libs/jquery/1.4.4/jquery.min.js”&&/script&12 &script src=”/ajax/libs/underscore.js/1.1.4/underscore-min.js”&&/script&13 &script src=”/ajax/libs/backbone.js/0.3.3/backbone-min.js”&&/script&14
15 &script&16 (function ($) {17
var World = Backbone.Model.extend({18
//创建一个World的对象，拥有name属性19
name: null20
var Worlds = Backbone.Collection.extend({23
//World对象的集合24
model:World25
var objWorlds = new Worlds();//初始化一个collection对象28
objWorlds.bind(“add“, function(World) {//注册监听事件29
$(“#world-list“).append(“&li&用户 &b&“ + World.get(‘name‘) + “&/b& 对你说：hello world！&/li&“); 30
var WorldView = Backbone.View.extend({33
el: $(“body“),34
events: {35
“click #btncheck“:
“checkIn“,
//事件绑定，绑定Dom中id为check的元素36
checkIn: function () {38
var world_name = prompt(“你叫什名字?“);39
if(world_name == “”) world_name = ‘None‘;40
var world = new World({ name: world_name });41
objWorlds.add(world);42
//实例化AppView45
var objWorldView = new WorldView();46 })(jQuery);47 &/script&48 &/html&
所有学习源码：
作者：ice.Kwok出处：
本文链接：，转载请注明。使用Backbone,js 和 MVC 架构创建一个典型的Hello world项目。虽然是“杀鸡用牛刀了”，毕竟是我第一次使用Backbone.js依赖jQuery 1.9.1Undersore.js 1.5.0Backbone.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 属性: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 函数：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 运行的结果。渲染 homeView， 我们使用 this.$el， 这是一个 jQuery 对象，它指向 el 的属性，使用 jQuery.html() 函数使用 this.template() 的结果替换 HTML。 下面是完整的 homeView 代码：var homeView = Backbone.View.extend({el: 'body',template: _.template('Hello World'),render: function (){this.$el.html(this.template({}));}});现在我们返回到 router，添加两行到 home 函数：var router = Backbone.Router.extend({
'': 'home'
initialize: function (){
// 一些在对象初始化的时候执行的代码
home: function (){
this.homeView = new homeV
this.homeView.render();
} });第一行创建了一个 homeView 对象并且赋值给 router 的 homeView 属性。第二行调用 homeView 对象的 render() 方法，触发 Hello World! 输出。最后，启动整体 Backbone 应用，为了保证 Dom 完全加载， 用 $(function (){}) 包装器调用 new router：$(function (){app =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 router = Backbone.Router.extend({
'': 'home'
initialize: function (){
// 一些在对象初始化的时候执行的代码
home: function (){
this.homeView = new homeV
this.homeView.render();
} }); var homeView = Backbone.View.extend({
el: 'body',
template: _.template('Hello World'),
render: function (){
this.$el.html(this.template({}));
} }); $(function (){
Backbone.history.start(); });&/script&&/body&&/html&
无相关信息求推荐一本学习backbone.js的书籍。本人刚毕业生前端开发。_百度知道
求推荐一本学习backbone.js的书籍。本人刚毕业生前端开发。
其他类似问题
前端开发的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁

我要回帖

更多关于 backbone.js todo 的文章

 

随机推荐