主干路由问题
Backbone routing problems
我刚开始使用主干网,在路由部分遇到了一些问题。这是我的简单页面http://superduper.dk/
// ABOUT MODEL
var AboutModel = Backbone.Model.extend({
urlRoot:'http://jsonplaceholder.typicode.com/posts',
});
var aboutModel = new AboutModel({
});
// ABOUT VIEW
var AboutView = Backbone.View.extend({
template: _.template('<h1><%= title %></h1> <p><%= body %></p>'),
initialize: function() {
this.listenTo(this.model, 'change', this.render);
},
render:function(){
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
});
// CASES MODEL
var CasesModel = Backbone.Model.extend({
urlRoot:'http://jsonplaceholder.typicode.com/posts',
});
var casesModel = new CasesModel({
});
// CASES VIEW
var CasesView = Backbone.View.extend({
template: _.template('<h1><%= title %></h1> <p><%= body %></p>'),
initialize: function() {
this.listenTo(this.model, 'change', this.render);
},
render:function(){
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
});
// ROUTER
var Routes = new (Backbone.Router.extend({
routes:{
'' : 'index',
'cases' : 'cases'
},
index:function(){
console.log('about');
var aboutView = new AboutView({model:aboutModel, el:'#view'});
aboutModel.fetch();
},
cases:function(){
console.log('cases');
var casesView = new CasesView({model:casesModel, el:'#view'});
casesModel.fetch();
},
start:function(){
Backbone.history.start({pushState: true})
}
}));
$(document).ready(function(){
Routes.start();
})
$(document).on("click", "a", function(e)
{
var href = $(e.currentTarget).attr('href');
var res = Backbone.history.navigate(href,true);
//if we have an internal route don't call the server
if(res)
e.preventDefault();
});
<ul>
<li><a href="/">About</a></li>
<li><a href="/cases">Cases</a></li>
<li><a href="http://www.contact.dk">Contact</a></li>
</ul>
<div id="view"></div>
加载页面时,您将看到about视图,然后导航到"案例"并返回到"about"视图,然后about视图不会再次显示。。。?
当我复制链接
http://superduper.dk/cases
并将其粘贴到浏览器中时,我会得到一个"找不到页面"。为什么它不显示页面。。。当我从根url导航到它时,它能工作吗?当我单击页面上的联系人链接时,它会导航到
http://www.contact.dk
,但当我使用浏览器后退按钮时,它将转到http://superduper.dk/http://www.contact.dk
,如果我再次单击浏览器后退按钮,它会显示"找不到页面"。。?
骨干路由器(以及大多数SPA框架的导航机制)基于哈希片段工作,观察hashchange event
。(除非你使用历史API,我认为你不是)
如果输入http://superduper.dk/#cases
,则视图已正确初始化。
您应该将超链接更新到(当然,除非您使用的是历史API)
<ul>
<li><a href="#">About</a></li>
<li><a href="#cases">Cases</a></li>
<li><a href="http://www.contact.dk">Contact</a></li>
</ul>
相关文章:
- 无法运行php代码,有角度路由问题
- ember.js:转换到相同的路由会产生堆栈溢出问题
- 控制器操作的路由问题
- 有UI路由问题的角度路由
- 在Node.js中将数据传递到子路由时出现问题
- Angular中的ajax调用和路由问题
- Angular1.3路由的直接URLS问题-即使html5mode为false
- 我在角度指令和角度路由中有一个问题
- 自定义 Mod 文件夹的角度路由问题
- 角度 js 路由提供程序中的问题
- 基于 id 访问 url 时存在角度路由问题
- Router.go 方法使路由页面流星变灰的问题
- Web API 应用程序中 asp.net 路由和路由前缀问题
- 在快递服务器问题中设置“邮政”路由时遇到困难
- 表达 4 + 角度 2 HTML 5 路由问题
- Expressjs 动态路由问题
- ASP.NET MVC 4 路由问题
- 角度JS和动态路由问题
- Slim Framework v3 - PUT 路由的问题
- AngularJS问题:路由后第二页未调用指令