运用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>