JavascriptMVC 之 route 的 history功能的使用
JavascriptMVC 之 route 的 history功能的使用
如果使用过ExtJs的同学，应该会知道它的history的功能，而在jquery MVC 框架中的route也具体有这种功能，
不过history的功能只是route中的其中一个功能。
在这里，只是举例介绍如何使用route的history的功能。
首先，定义一个router.js对象，
steal( 'jquery/controller', 'jquery/controller/route'
)
.then(function($) {
$.Controller('Project.Router',
/** @Static */
{
defaults : {
nav1 : ''
}
},
/** @Prototype */
{
/**
* 这里是重点，它是实现history的核心
* 监听route的变化，也就是type的变化，每当type变化时，会触发这个事件
*/
'{$.route} change' : function(el, ev, attr, how, newVal, oldVal) {
switch (attr) {
case 'type':
this.options.nav1 = newVal;
this.nav1_change(newVal);
break;
}
},
nav1_change : function(val) {
switch (val) {
case 'home':
console.info("打开主页");
break;
case 'task':
console.info("打开我的任务");
break;
}
}
})
});
接着，我们在模块初始化时，创建一个$.route对象，还有就是把router对象实例绑定到body元素上，再设置一下，默认打开页面，
那么，我们每次进去系统时，就会打开这个页面。当然，我们也可以把每次最后一个页面保存到cookie中，那么，我们Ｆ５刷新时，
页面会自动跳会到最后一次访问的页面。
steal(
'./project.css', // application CSS file
'./models/models.js', // steals all your models
'./fixtures/fixtures.js',// sets up fixtures for your models
'lib/wijmo',
'jquery/lang/json',
'jquery/controller',
'jquery/model',
'jquery/view/ejs',
'project/controllers',
function(){ // configure your application
//创建$.route对象
$.route( "url/:type" );
//创建router对象实例
$('body').project_router();
// $.route.attrs({type : 'home'});
//默认打开页面
location.hash = "#!url/home";
$("#dContent").project_proc();
});
最后，就是点击菜单时，如何变化type，
steal( 'jquery/controller','jquery/controller/view','jquery/view/ejs','jquery/model'
)
.then(function($) {
//控制器
$.Controller('project.proc',
/** @Static */
{
defaults : {
}
},
/** @Prototype */
{
'div.action a click':function(el,ev){
var id = el.attr("href").substring(1);
//在这里，我们点击菜单时，会改变type的值，这样会触发route的change事件
$.route.attrs({type : id});
return false;
},
init:function(){
}
}
)});
从上面我们可以看到通过３步就可以实现这个history功能，是不是很方便。