問題のコレクションであるこのような JSON があります。
{
"id": "505",
"issuedate": "2013-01-15 06:00:00",
"lastissueupdate": "2013-01-15 13:51:08",
"epub": false,
"pdf": true,
"price": 3,
"description": "Diese Version ist nur als PDF verfügbar.",
"downloadable": true,
"renderings": [
{
"height": 976,
"width": 1024,
"sourcetype": "pdf",
"pagenr": 0,
"purpose": "newsstand",
"relativePath": null,
"size": 0,
"url": "a/url/image.jpg"
},
{
"height": 488,
"width": 512,
"sourcetype": "pdf",
"pagenr": 0,
"purpose": "newsstand",
"relativePath": null,
"size": 0,
"url": "a/url/image.jpg"
}
}
バックボーンを使用していて、サブ要素 (レンダリング) にアクセスしたい。parse メソッドを上書きして、「レンダリング」が新しいコレクションであることを伝えます。この部分は正常に動作します。いくつかの問題が発生するのは、問題のコレクションをテンプレートに渡すときです。次に、課題ごとに for each を作成し、その属性 (id、issuedate、lastissueupdate など) にアクセスできますが、課題のレンダリングにアクセスするにはどうすればよいですか?
私の見解：
define([
'jquery',
'underscore',
'backbone',
'text!templates/home/homeTemplate.html',
'collections/issues/IssueCollection'
], function($, _, Backbone, homeTemplate, IssueCollection){
var HomeView = Backbone.View.extend({
el: $("#page"),
initialize:function(){
var that = this;
var onDataHandler = function(issues){
that.render();
}
this.issues = new IssueCollection();
this.issues.fetch({
success:onDataHandler,
error:function(){
alert("nicht gut")
}
});
},
render: function(){
$('.menu li').removeClass('active');
$('.menu li a[href="#"]').parent().addClass('active');
var compiledTemplate = _.template(homeTemplate, {_:_, issues: this.issues.models});
this.$el.html(compiledTemplate);
}
});
return HomeView;
});
次に、非常に基本的なテンプレートがあります。
再開するには、RENDERINGS のコレクションを含むモデル ISSUE のコレクション ISSUES があり、テンプレートでモデル RENDER にアクセスしたいと考えています。
編集： IssueCollection
define([
'underscore',
'backbone',
'models/issue/IssueModel'
], function(_, Backbone, IssueModel){
var IssueCollection = Backbone.Collection.extend({
model: IssueModel,
url: function(){
return '/padpaper-ws/v1/pp/fn/issues';
},
parse: function(response){
return response.issues;
}
//initialize : function(models, options) {},
});
return IssueCollection;
});
問題モデル
define([
'underscore',
'backbone',
'collections/renderings/RenderingsCollection'
], function(_, Backbone, RenderingsCollection) {
var IssueModel = Backbone.Model.extend({
parse: function(response){
response.renderings = new RenderingsCollection(response.renderings);
return response;
},
set: function(attributes, options) {
if (attributes.renderings !== undefined && !(attributes.renderings instanceof RenderingsCollection)) {
attributes.renderings = new RenderingsCollection(attributes.renderings);
}
return Backbone.Model.prototype.set.call(this, attributes, options);
}
});
return IssueModel;
});
レンダリング コレクション
define([
'underscore',
'backbone',
'models/rendering/RenderingModel'
], function(_, Backbone, RenderingModel){
var RenderingsCollection = Backbone.Collection.extend({
model: RenderingModel
//initialize : function(models, options) {},
});
return RenderingsCollection;
});
レンダリングモデル
define([
'underscore',
'backbone'
], function(_, Backbone) {
var RenderingModel = Backbone.Model.extend({
return RenderingModel;
});
ありがとう ！！