Backbone.js学习记录 Hello World!
2015-01-24 01:01
555 查看
使用Backbone,js 和 MVC 架构创建一个典型的Hello world项目。虽然是“杀鸡用牛刀了”,毕竟是我第一次使用Backbone.js
Undersore.js 1.5.0
Backbone.js
在 extend 调用里设置指定的 routes 属性:
Backbone中routes 属性需要下面的格式: ‘path/:param’: 'action',它实现了是当URl是 filename#path/param时, 触发名为action 的函数(在Router 对象里定义)。然后添加一个 home 路由:
现在我们需要添加一个 home 函数:
添加创建和渲染 View 的逻辑。现在先定义 homeView:
然后给 homeView 添加属性
el 是一个保存 jQuery 选择器的字符串,也可以使用'.'作为类和'#'作为ID名。template属性被赋值给传入 Hello World 的 Underscore.js 函数 template 运行的结果。
渲染 homeView, 我们使用 this.$el, 这是一个 jQuery 对象,它指向 el 的属性,使用 jQuery.html() 函数使用 this.template() 的结果替换 HTML。 下面是完整的 homeView 代码:
现在我们返回到 router,添加两行到 home 函数:
第一行创建了一个 homeView 对象并且赋值给 router 的 homeView 属性。第二行调用 homeView 对象的 render() 方法,触发 Hello World! 输出。
最后,启动整体 Backbone 应用,为了保证 Dom 完全加载, 用 $(function (){}) 包装器调用 new router:
依赖
jQuery 1.9.1Undersore.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 学习过程记录
- Backbone.js学习记录 使用集合
- Backbone.js 学习过程记录
- backbone.js学习网站部分收集
- JS学习记录(二)
- js基础知识相关学习笔记记录
- js宝典学习笔记,记录JAVA SCRIPT宝典中的内容
- backbone js学习笔记之第二篇Model层
- 我记录学习研究之前端开发一(js基于1.8版)
- Backbone.js入门学习资源
- Backbone.js学习笔记——View篇
- 20100826 学习记录:.net中调用的js日历控件
- 20110107 学习记录:动态指定iframe的scr属性 & IE和Firefox的js兼容性整理 & iframe自适应高度
- 20101208 学习记录:Js的substring、substr和C#的Substring
- 我记录学习研究之前端开发二(js基于1.8版)
- JS学习记录
- 【记录】JS正则表达式(学习笔记2)现学现卖还帮美女解决了个问题。
- [学习记录]js处理json的list对象
- JS学习记录(一)