Backbone.js学习记录 Hello World!
来源:互联网 发布:新华阅读网软件 编辑:程序博客网 时间:2024/06/05 09:29
使用Backbone,js 和 MVC 架构创建一个典型的Hello world项目。虽然是“杀鸡用牛刀了”,毕竟是我第一次使用Backbone.js
依赖
jQuery 1.9.1
Undersore.js 1.5.0
Backbone.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({ routes: { '': 'home' }, initialize: function (){ // 一些在对象初始化的时候执行的代码 }, home: function (){ this.homeView = new homeView; this.homeView.render(); } });
第一行创建了一个 homeView 对象并且赋值给 router 的 homeView 属性。第二行调用 homeView 对象的 render() 方法,触发 Hello World! 输出。
最后,启动整体 Backbone 应用,为了保证 Dom 完全加载, 用 $(function (){}) 包装器调用 new router:
var app;$(function (){ app = new router; 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 app; var router = Backbone.Router.extend({ routes: { '': 'home' }, initialize: function (){ // 一些在对象初始化的时候执行的代码 }, home: function (){ this.homeView = new homeView; this.homeView.render(); } }); var homeView = Backbone.View.extend({ el: 'body', template: _.template('Hello World'), render: function (){ this.$el.html(this.template({})); } }); $(function (){ app = new router; Backbone.history.start(); });</script></body></html>
- Backbone.js学习记录 Hello World!
- Backbone.js学习记录 Hello World!
- Backbone.js 学习过程记录
- 编写Backbone.js的第一个应用,相当于Hello World!
- Backbone.js学习记录 使用集合
- C++学习之旅记录hello world
- 【JZ2440】自我学习记录【1】【hello world】
- node.js 学习笔记001 :Hello,world !
- node.js学习之输出Hello World
- Hello World 记录
- backbone.js 学习笔记
- Backbone.js学习
- Backbone.js学习笔记
- backbone.js 学习
- node.js hello world
- 【Node.js】Hello World
- node.js Hello world
- js之hello world
- SVN版本控制器的普通服务器安装----->Subversion
- Java线程个数简单控制
- Splay括号匹配(BZOJ2209)
- ACM - 算法篇,基础题目
- SDJZU_新生_KMP/字符串
- Backbone.js学习记录 Hello World!
- Android原生(Native)C开发
- border-radius 移动之伤
- 最全的SDK环境下载
- Android 数据存储——SQLite使用详解
- CentOS Linux防火墙配置及关闭
- 循环追逐式彩灯电路_应用方案
- compare of the CBC and CTR mode in PyCrypto AES
- bzoj 1054 题解