Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/ruby-on-rails-4/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何访问以前的型号';从Handlebar视图模板中获取JSON文件的属性?_Json_Backbone.js_Handlebars.js - Fatal编程技术网

如何访问以前的型号';从Handlebar视图模板中获取JSON文件的属性?

如何访问以前的型号';从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

我已经创建了一个包含多个项目的页面(使用JSON数据,现在它是一个主干集合),这些项目像幻灯片一样显示。 数据加载正确,页面ID显示在地址栏中。(即localhost:3000/#/文章/合理的家庭作业借口)

但是,我想添加箭头,这样我可以在集合中前进或后退并更新地址栏,但我似乎无法访问兄弟文章的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'
},
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”:“当前的政治危机,
    我想解决方案可能是在主干中处理更多内容,并在车把中解析刚准备好的片段,因为您需要记住当前显示项目的状态。谢谢我修复了拼写错误,我正在修改内容以用于演示目的。