Backbone.js学习记录 Hello World!
来源:互联网 发布:机票怎么订最便宜 知乎 编辑:程序博客网 时间:2024/05/19 02:43
使用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
- node.js进程管理 PM2 && forever
- AngularJS语法
- AngularJS语法三
- uva1588换低档装置Kickdown
- Awesome Scala
- Backbone.js学习记录 Hello World!
- Backbone.js学习记录 使用集合
- 【零起步开发Cocos2dx-3.x-王牌飞行员(一)】为什么要开发cocos2d游戏
- CentOS 6.5下PHP 5.6编译安装
- NSArray 排序总结
- sqlite封装
- CentOS6.5下MySQL 5.6安装
- uEditor独立图片上传
- 基础搜索算法题解(A-C)