2013-09-04 6 views
1

Если я хочу представить следующие данные в коллекцию Backbone.js, что должен JSON, что я создаю выглядеть ?:Backbone RESTful JSON схема

id: 1 
fname: "John" 
surname: "Lennon" 
email: "[email protected]" 
age: 22 

id: 2 
fname: "Paul" 
surname: "McCartney" 
email: "[email protected]" 
age: 22 

id: 3 
fname: "George" 
surname: "Harrison" 
email: "[email protected]" 
age: 20 

id: 4 
fname: "Ringo" 
surname: "Starr" 
email: "[email protected]" 
age: 24 

Я экспортирующий его следующим образом:

[{ 
    "id":1, 
    "fname":"John", 
    "surname":"Lennon", 
    "email":"[email protected]", 
    "age":22 
},{ 
    "id":2, 
    "fname":"Paul", 
    "surname":"McCartney", 
    "email":"[email protected]", 
    "age":22 
},{ 
    "id":3, 
    "fname":"George", 
    "surname":"Harrison", 
    "email":"[email protected]", 
    "age":20 
},{ 
    "id":4, 
    "fname":"Ringo", 
    "surname":"Starr", 
    "email":"[email protected]", 
    "age":24 
}] 

Когда представленный JSON выше, моя коллекция, похоже, содержит финальный битл (Ringo).


Это мой Вид:

var app = app || {}; 

app.BeatleView = Backbone.View.extend({ 

     el: '#page', 

     template: Handlebars.getTemplate('account_statement'), 

     initialize: function() { 
       console.info('init:',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() { 
       var data = this.collection.toJSON(); 
     console.log('col', this.collection); // added 
       this.$el.html(this.template({beatles: data})); 
       return this; 
     } 
}); 

Это моя коллекция

var app = app || {}; 

app.BeatlesCollection = Backbone.Collection.extend({ 
     model: app.Beatle, 
     url: 'http://localhost/path/to/beatles', 

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

Это моя модель

var app = app || {}; 

// create a model to represent a single transaction on a statement 
app.Transaction = Backbone.Model.extend({}); 

Это то, что console.log('col', this.collection); на мой взгляд, в метод визуализации шоу:

col child {length: 1, models: Array[1], _byId: Object, _listenerId: "l2", _events: Object…} 
_byId: Object 
_events: Object 
_listenerId: "l2" 
length: 1 
models: Array[1] 
0: child 
_changing: false 
_events: Object 
_pending: false 
_previousAttributes: Object 
attributes: Object 
amount: 205.99 
currency: "USD" 
date: "2013-05-13" 
id: 13 
vendor: "Reebok Outlet" 
__proto__: Object 
changed: Object 
cid: "c3" 
collection: child 
id: 13 
__proto__: Surrogate 
length: 1 
__proto__: Array[0] 
__proto__: Surrogate 

My Рули Шаблон выглядит следующим образом:

<h1>Your Statement</h1> 
<table border="1"> 
    <thead> 
     <th>Name</th> 
     <th>Email</th> 
     <th>Age</th> 
    </thead> 
    <tbody> 
    {{#each beatle}} 
     <tr> 
      <td>{{this.fname}} {{this.surname}}</td> 
      <td>{{this.email}}</td> 
      <td>{{this.age}}</td> 
     </tr> 
    {{/each}} 
    </tbody> 
</table> 
+0

Как вы загружаете коллекцию? – plalx

+0

Я добавил дополнительную информацию - надеюсь, что это то, что вы хотели – atwright147

+0

Я никогда не использовал Handlebars или Backbone, однако вы уверены, что функция шаблона ожидает JSON? Не должно быть более похоже на это. $ El.html (this.template ({beatles: this.collection.models})); '? Вы можете проверить, сколько записей содержится в вашей коллекции, просмотрев его свойство 'length'. – plalx

ответ

1

Похоже JSON я написал выше было верный.

Проблема заключалась в том, что JSON, который я опубликовал, был псевдокодом, и JSON, который я фактически выводил из моей бэкэнд-системы, был неправильным - все идентификаторы на моем выходе были одинакового числа (проблема копирования/вставки).

Для тех, кто хочет создать приложение Backbone/Handlebars, код, как представляется, является хорошей отправной точкой.

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