Question

我创建了包含多个项目的页面（使用现在是Backbone集合的JSON数据），它显示为幻灯片。数据正确加载，页面ID显示在地址栏中。（即localhost：3000 /＃/ articles / plausible-homework-excuses）。

但是，我想添加箭头，以便我可以在集合中前进或后退并更新地址栏，但我似乎无法访问兄弟文章的ID。

在view.js文件中我创建了这个：

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'
},

从上面可以看出，{{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>"
 }
]

有没有办法让{{attributes.id}}显示{{nextsibling.attributes.id}}？

因此，如果我在“何时该放手”的文章中并且想要点击返回，那么该URL将从“localhost：3000 /＃/ articles / when-is-it-time-to-to-去“localhost：3000 /＃/ articles / the-immediate-political-crisis”。

如何从Handlebars Views模板中访问以前模型的JSON文件属性？

0 个答案: