如何访问以前的型号';从Handlebar视图模板中获取JSON文件的属性?
我已经创建了一个包含多个项目的页面(使用JSON数据,现在它是一个主干集合),这些项目像幻灯片一样显示。 数据加载正确,页面ID显示在地址栏中。(即localhost:3000/#/文章/合理的家庭作业借口) 但是,我想添加箭头,这样我可以在集合中前进或后退并更新地址栏,但我似乎无法访问兄弟文章的ID 在view.js文件中,我创建了以下内容:如何访问以前的型号';从Handlebar视图模板中获取JSON文件的属性?,json,backbone.js,handlebars.js,Json,Backbone.js,Handlebars.js,我已经创建了一个包含多个项目的页面(使用JSON数据,现在它是一个主干集合),这些项目像幻灯片一样显示。 数据加载正确,页面ID显示在地址栏中。(即localhost:3000/#/文章/合理的家庭作业借口) 但是,我想添加箭头,这样我可以在集合中前进或后退并更新地址栏,但我似乎无法访问兄弟文章的ID 在view.js文件中,我创建了以下内容: var ArticleView = Backbone.View.extend({ tagName: "ul", className: "deck", t
var ArticleView = Backbone.View.extend({
tagName: "ul",
className: "deck",
template: Handlebars.compile(
'{{#each models}}' +
'<li class="card-single" id="{{attributes.id}}">' +
'<div class="card-wrapper">' +
'<div class="card-control">' +
'<a class="previous" id="{{attributes.id}}" href="#/articles/{{attributes.id}}">' +
'<span class="fa fa-angle-left"></span>' +
'</a>' +
'<div class="card-count">{{attributes.index}}/{{collection.length}}</div>' +
'<a class="next" id="{{attributes.id}}" href="#/articles/{{attributes.id}}">' +
'<span class="fa fa-angle-right"></span>' +
'</a>' +
'</div>' +
'<div class="content">' +
'<a href="#">' +
'<h2>{{attributes.name}}</h2>' +
'</a> ' +
'{{{attributes.content}}}' +
'</div>' +
'<div class="bottom-card-control">' +
'<a class="previous" id="{{attributes.id}}" href="#/articles/{{attributes.id}}">' +
'<span class="fa fa-angle-left"></span>' +
'</a>' +
'<a href="" class="share">Share this card</a>' +
'<a class="next" id="{{attributes.id}}" href="#/articles/{{attributes.id}}">' +
'<span class="fa fa-angle-right"></span>' +
'</a>' +
'</div>' +
'</div>' +
'</li>' +
'{{/each}}'
),
initialize: function () {
this.listenTo(this.collection, "reset", this.render);
this.listenTo(this.collection, "add", this.showItem);
this.listenTo(this.collection, "remove", this.render);
},
events: {
'click .next' : 'showNext',
'click .previous' : 'showPrev'
},
var ArticleView=Backbone.View.extend({
标记名:“ul”,
类名:“甲板”,
模板:handlebar.compile(
“{{#每个模型}”+
''+
'' +
'' +
'' +
“{{attributes.index}}/{{collection.length}”+
'' +
'' +
'' +
' ' +
“{{{attributes.content}}”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“ ”+
“{{/每个}}”
),
初始化:函数(){
this.listenTo(this.collection,“reset”,this.render);
this.listenTo(this.collection,“add”,this.showItem);
this.listenTo(this.collection,“remove”,this.render);
},
活动:{
'单击.下一步':'显示下一步',
“单击。上一步”:“showPrev”
},
从上面可以看到,{{attributes.id}}将获取当前模型的id,而不是之前或之后的同级
这些项目取自如下所示的JSON文件:
[
{
"id": "plausible-homework-excuses",
"index": 1,
"url": "http://www.test.com.",
"name": "Plausible homework excuses",
"imagepath": "http://lorempixel.com/400/200/abstract/",
"content": "<p>Dog ate my homework is something completely plausible</p>"
},
{
"id": "the-immediate-political-crisis",
"index": 2,
"url": "http://www.test.com",
"name": "The immediate political crisis",
"imagepath": "http://lorempixel.com/400/200/nature/",
"content": "<p>Stranger than fiction.</p>"
},
{
"id": "when-is-it-time-to-let-go",
"index": 3,
"url": "http://www.test.com",
"name": "When is it time to let go",
"imagepath": "http://lorempixel.com/400/200/nature/",
"content": "<p>When is it time to let go? Don't let your watch let you down.</p>"
}
]
[
{
“id”:“合理的家庭作业借口”,
"索引":1,,
“url”:”http://www.test.com.",
“姓名”:“合理的家庭作业借口”,
“图像路径”:http://lorempixel.com/400/200/abstract/",
“内容”:“狗吃了我的作业是完全有道理的事”
},
{
“id”:“当前的政治危机”,
“指数”:2,
“url”:”http://www.test.com",
“名称”:“当前的政治危机”,
“图像路径”:http://lorempixel.com/400/200/nature/",
“内容”:“比小说更离奇。”
},
{
“id”:“什么时候该放手”,
“指数”:3,
“url”:”http://www.test.com",
“姓名”:“什么时候该放手”,
“图像路径”:http://lorempixel.com/400/200/nature/",
“内容”:“什么时候该放手?别让手表让你失望。”
}
]
有没有办法让{{attributes.id}显示{{{nextsibling.attributes.id}}
因此,如果我在一篇关于“什么时候该放手”的文章中想点击后退,URL将从“localhost:3000/#/articles/When is time to go”更改为“localhost:3000/#/articles/the immediate political crisis”.json中丢失了一些引号,可以吗?你是说索引值?它不应该导致问题,因为它们是数字的。
“id”:“当前的政治危机,
我想解决方案可能是在主干中处理更多内容,并在车把中解析刚准备好的片段,因为您需要记住当前显示项目的状态。谢谢我修复了拼写错误,我正在修改内容以用于演示目的。