Ale*_*lex 6 model-view-controller jquery backbone.js underscore.js
我在应用程序启动时在dom上有一些导航链接,我希望通过Backbone劫持渐进增强功能(这是一个非常静态的文本内容版本,位于主干应用程序的基础上).
html看起来像这样:
...
<body>
<header>
<nav>
<ol>
<li>
<a href="/en/home">home</a>
</li>
<li>
... few more links
</header>
Run Code Online (Sandbox Code Playgroud)
然后使用以下方法实例化我的应用程序:
var App = (function(fw){
var $ = fw;
var workspace = {};
var self = {};
var lang = "en";
var models = {...};
var views = {...};
var collections = {...};
self.init = function() {
workspace = new Workspace(
{
routes: {
"/": "home",
"/home": "home",
"/terms": "terms",
"/news": "blog"
},
lang : lang
})
}
return self;
});
var app;
// launch
$(document).ready(function() {
app = new App(jQuery);
app.init();
});
Run Code Online (Sandbox Code Playgroud)
工作区只是一个路由器,来自应用程序的路由通过初始化函数正确处理到路由器中,链接也按预期工作和更改URL,并在旧浏览器上使用哈希进行处理.问题是在Router/Workspace本身内没有回调.它只是静音,并且在点击时不会触发功能
这是我的工作区/路由器:
var Workspace = Backbone.Router.extend({
routes : {},
//functions <------------THESE
home: function(e){
e.preventDefault();
console.log("home here");
App.views.HomeView.render();
},
terms: function(){ //<-----------NEVER
console.log("terms here");
App.views.TermsView.render();
},
blog: function(){ //<-----------FIRE
console.log("blog here");
},
initialize: function(params){
var t = this;
var tmpr = {};
for(var i in params.routes)
{
//this just fuses lang and each route so /home becomes /en/home
tmpr["/"+params.lang+i] = params.routes[i];
}
this.routes = tmpr; // this is fine and when logged it shows nicely with all routes looking good
// router will only ever initialize once so lets deal with the stuff currently on the DOM before the app is inited.
$("a",$("header")).click(function(e){
e.preventDefault();
Backbone.history.navigate($(this).attr("href"),true);//<-- true is set? should fire methods?
// I've also tried all kinds of variations like t.navigate(..) where t is this workspace
});
//this also seems to be fine and either does hashes or states
if(history && history.pushState) {
Backbone.history.start({
pushState : true
});
console.log("has pushstate");
} else {
Backbone.history.start();
console.log("no pushstate");
}
console.log("Router inited with routes:",this.routes);//logs routes nicely
}
});
Run Code Online (Sandbox Code Playgroud)
initialize当函数运行时,路由已经被绑定(参见骨干源)。
您可以使用以下函数触发路由绑定_bindRoutes:
this.routes = tmpr;
this._bindRoutes();
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1830 次 |
| 最近记录: |