[英]Backbone RESTful JSON schema
如果我想将以下数据呈现给ribs.js集合,我创建的JSON应该是什么样的?:
id: 1
fname: "John"
surname: "Lennon"
email: "john@beatles.com"
age: 22
id: 2
fname: "Paul"
surname: "McCartney"
email: "paul@beatles.com"
age: 22
id: 3
fname: "George"
surname: "Harrison"
email: "george@beatles.com"
age: 20
id: 4
fname: "Ringo"
surname: "Starr"
email: "ringo@beatles.com"
age: 24
我一直将其导出如下:
[{
"id":1,
"fname":"John",
"surname":"Lennon",
"email":"john@beatles.com",
"age":22
},{
"id":2,
"fname":"Paul",
"surname":"McCartney",
"email":"paul@beatles.com",
"age":22
},{
"id":3,
"fname":"George",
"surname":"Harrison",
"email":"george@beatles.com",
"age":20
},{
"id":4,
"fname":"Ringo",
"surname":"Starr",
"email":"ringo@beatles.com",
"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 );
在我的视图的render方法中显示:
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
我的车把模板如下所示:
<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>
我上面发布的JSON似乎正确。
问题是我发布的JSON是伪代码,而我实际上从后端系统输出的JSON是错误的-输出中的所有ID都是相同的数字(复制/粘贴问题)。
对于希望创建Backbone / Handlebars应用程序的任何人,上面的代码似乎都是一个不错的起点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.