Блог

Главная - Вопросы по программированию - Как мне получить доступ к атрибутам предыдущей модели файла JSON из шаблона представлений руля?

Как мне получить доступ к атрибутам предыдущей модели файла JSON из шаблона представлений руля?

#json #backbone.js #handlebars.js

#json #backbone.js #handlebars.js

Вопрос:

Я создал страницу с несколькими элементами (используя данные JSON, которые теперь являются основной коллекцией), которые отображаются как слайд-шоу. Данные загружаются правильно, и идентификатор страницы отображается в адресной строке нормально. (т.е. localhost:3000/ #/articles/правдоподобно-домашнее задание-оправдания).

Тем не менее, я хочу добавить стрелки, чтобы я мог перемещаться вперед или назад в коллекции и обновлять адресную строку, но, похоже, я не могу получить доступ к идентификатору статьи.

В 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 }} получит идентификатор текущей модели, а не ее родственного устройства до или после этого.

Элементы берутся из файла 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 / когда пора идти» на «localhost: 3000 / # / articles / the-немедленный политический кризис».

Комментарии:

1. некоторые кавычки потеряны в json, это нормально?

2. Вы имеете в виду значения индекса? Это не должно вызывать проблем, потому что они числовые.

3. "id": "the-immediate-political-crisis,

4. я предполагаю, что решение может заключаться в обработке большего количества в backbone и разборе в handlebars только подготовленных фрагментов, поскольку вам нужно запомнить статус текущего отображаемого элемента.

5. Спасибо, я исправил опечатку, я изменял содержимое для демонстрационных целей.