Backbone.js & Handlebars.js с RESTful API

Я пытаюсь использовать Backbone.js с Handlebars.js для использования и отображения Custome JSON API.Backbone.js & Handlebars.js с RESTful API

Данные, безусловно, потребляются и добавляются в коллекцию.

Шаблон отображает, но таблица не содержит данных (одна полностью пустая строка).

Как я могу отладить это?

маршрутизатор

'showStatement': function() { 
    new app.StatementView({collection: new app.StatementCollection()}); 
}

Коллекция

app.StatementCollection = Backbone.Collection.extend({ 
    model: app.Transaction, 
    url: 'http://localhost/api/public/out/123456/statement', 

    initialize: function() { 
     console.log('Init app.StatementCollection'); 
    } 
});

Модель

app.Transaction = Backbone.Model.extend({ 
    /* 
    defaults: { 
     vendor: 'Unknown', 
     amount: 'Unknown', 
     currency: 'Unknown', 
     date:  'Unknown' 
    } 
    */ 
});

Просмотр

app.StatementView = Backbone.View.extend({ 

    el: '#page', 

    template: Handlebars.getTemplate('account_statement'), 

    initialize: function() { 
     console.info(this.collection); 
     this.render(); 
     this.listenTo(this.collection, 'add', this.render); 
     this.listenTo(this.collection, 'reset', this.render); 
     this.collection.fetch(); 
    }, 

    // render library by rendering each book in its collection 
    render: function() { 
     this.$el.html(this.template(JSON.stringify(this.collection.toJSON()))); // <------ pretty sure the problem lies here?!? 
     console.log('col', JSON.stringify(this.collection.toJSON())); // <------ the output from this is shown at the bottom 
     return this; 
    } 
});

Рули Шаблон

{{#if statement}} 
    <h1>Your Statement</h1> 
    <table border="1"> 
     <thead> 
      <th>Date</th> 
      <th>Name</th> 
      <th>Amount</th> 
     </thead> 
     <tbody> 
     {{#each statement}} 
      {{debug}} 
      <tr> 
       <td>{{this.vendor}}</td> 
       <td>{{currency this.currency}}{{this.amount}}</td> 
       <td><time class="format-date" datetime="{{this.date}}">{{this.date}}<time></td> 
      </tr> 
     {{/each}} 
     </tbody> 
    </table> 
{{else}} 
    <p class="warning">Sorry, nothing to show.</p> 
{{/if}}

Это то, что выглядит JSON моего API, как:

{"status":true,"result":[{"id":1,"vendor":"Jessops","amount":595.99,"currency":"GBP","date":"2012-11-01 04:57:04"},{"id":2,"vendor":"Starbucks","amount":6.99,"currency":"GBP","date":"2012-11-02 04:57:04"},{"id":3,"vendor":"Superdry","amount":155.99,"currency":"GBP","date":"2012-11-03 04:57:04"},{"id":6,"vendor":"Reebok Outlet","amount":205.99,"currency":"USD","date":"2012-11-05 04:57:04"}]}

Выход из console.log ('Col', JSON .stringify (this.collection.toJSON()));

col [{"status":true,"result":[{"id":1,"vendor":"Jessops","amount":595.99,"currency":"GBP","date":"2012-11-01 04:57:04"},{"id":2,"vendor":"Starbucks","amount":6.99,"currency":"GBP","date":"2012-11-02 04:57:04"},{"id":3,"vendor":"Superdry","amount":155.99,"currency":"GBP","date":"2012-11-03 04:57:04"},{"id":6,"vendor":"Reebok Outlet","amount":205.99,"currency":"USD","date":"2012-11-05 04:57:04"}]}]

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

render: function() { 
    data = this.collection.toJSON(); 
    this.$el.html(this.template({statement: data[0]})); 
    return this; 
}

Это говорит о том, что мой выход JSON неправильно. Как я могу улучшить свой JSON, чтобы уменьшить необходимость в [0]?

источник

2013-09-01 atwright147

Вы передаете свой JSON, прежде чем передавать его в шаблон. Вам нужно передать объект прямо. –

или, наоборот, передать объекты из модели или коллекции; напримердля модели, передать атрибуты модели и для коллекции передать модели коллекции в функцию шаблона - я обычно предпочитаю это, если мне когда-либо понадобится переопределить метод toJSON, чтобы изменить мой объект/коллекцию, чтобы лучше соответствовать тому, что сервер (обычно это нужно делать, если сервер поставляет мне объект не в том виде, который мне нужен, и я его перестраиваю) – kinakuta

@Nathan: Я изначально передавал объект напрямую, но это тоже не сработало. Я также попытался использовать JSON.parse(), но это ошибки. Любые другие предложения? – atwright147

Похоже, что ваш API возвращает некоторую «мета» информацию (часть status : true) вместе с данными о коллекции и что ваши реальные данные находятся в массиве result. Я думаю, что Backbone предполагает, что ваши данные - это всего лишь один элемент, и он помещает его в массив, поскольку он загружается в объект коллекции. Вот почему вам нужно использовать data[0], чтобы вытащить первый элемент из этого массива.

Я думаю, что вам нужно либо изменить свой json, чтобы массив, возвращаемый в настоящее время в result, является элементом верхнего уровня. Вам нужно найти способ сказать Backbone, что ваши данные живут в элементе result, а не на верхнем уровне.

источник

2013-09-10 16:07:46

Backbone.js & Handlebars.js с RESTful API

ответ

Смежные вопросы