标签:javascript backbone-js backbone-routing
我有一个简单的路由器:
Erin.Router = Backbone.Router.extend({
initialize: function() {
Backbone.history.start({pushState: true});
},
routes: {
'' : 'index',
'project/:img' :'project',
},
index: function() {
var galleryView = new Erin.GalleryView();
},
project: function(img) {
console.log(img);
}
});
Erin.GalleryView的模板是(认为可能存在问题):
<script type="text/template" id="gallery-grid">
<a href="/project/<%= id %>">
<img src="<%= thumbnail %>" />
<span class="desc">
<div class="desc-wrap">
<p class="title"><%= title %></p>
<p class="client"><%= client %></p>
</div>
</span>
</a>
</script>
GalleryView和GalleryItem代码.
Erin.GalleryItem = Backbone.View.extend({
tagName: 'div',
className: 'project-container',
//Grab the template html
template: _.template($('#gallery-grid').html()),
//Set up the render function
render: function() {
//What is the $el in this case?
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
Erin.GalleryView = Backbone.View.extend({
el: '#projects',
initialize: function() {
//create new collection
this.col = new Erin.Gallery();
//Listen to all events on collection
//Call Render on it
this.listenTo(this.col,'all',this.render);
//Fetch data
this.col.fetch();
},
render: function() {
//Get reference to the view object
var that = this;
//Empty div
this.$el.empty();
//For each model in the collection
_.each(this.col.models, function(model){
//call the renderItem method
that.renderItem(model);
},this);
},
renderItem: function(model) {
//create a new single item view
var itemView = new Erin.GalleryItem({
model:model
});
//Append items to to element, in this case "#projects"
this.$el.append(itemView.render().el);
}
});
然后我准备好了一份文件
$(function() {
var router = new Erin.Router();
$('#projects').on('click', 'a[href ^="/"]', function(e){
e.preventDefault();
router.navigate($(this).attr('href'),{trigger: true});
});
});
当您加载页面并单击#project部分中的一个链接时,一切都按预期运行,但是如果刷新该页面,则会出现打破页面的错误.
从控制台:
Uncaught SyntaxError: Unexpected token < js/jquery.js:1
Uncaught SyntaxError: Unexpected token < js/underscore-min.js:1
Uncaught SyntaxError: Unexpected token < js/backbone.js:1
Uncaught SyntaxError: Unexpected token < erin.js:1
它还说明了以下内容:
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8888/project/js/backbone.js".
对于文档头部中的所有链接和脚本.
所有这些似乎都指向index.html文件的第一行.因此,如果我单击一个链接,它将从我的数据中控制我正在寻找的img id,如果我刷新页面或输入该链接,我会得到上面的错误.我是否正确地认为我应该能够保存链接domain.com/project/coolthing并在有人访问该页面时使用该工具.我错过了什么吗?实施了一些奇怪的东西?向正确的方向轻推将非常感激.
谢谢.
解决方法:
你有服务器端的问题.你可能已经完成了解决方案的一半.
看起来您已正确配置服务器以在任何匹配上发送应用HTML,但具有优先权的资产(js,css)除外.
问题在于主HTML,其中JS文件使用相对路径引用.当pushState将URL更新为/ project / 1后重新加载时,基本URL将变为/ project /.
即.你有
<script src="js/backbone.js"></script>
什么时候你应该
<script src="/js/backbone.js"></script>
因此,当浏览器尝试加载backbone.js时,它找不到它(/project/js/backbone.js不存在),并点击提供应用程序HTML的服务器catchall(因此解析错误,扼杀<). 我的解释可能不是很清楚,这里已经很晚了,但我相信你会明白的!
标签:javascript,backbone-js,backbone-routing 来源: https://codeday.me/bug/20190718/1492199.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。