私は明らかに何か間違ったことをしていると思います。アンダースコア テンプレートを ICanHaz
に置き換えたので、問題がそれによるものなのか、CompositeView の別の間違いによるものなのかわかりません。とにかく、マリオネットのビュー タイプとリージョンの間で少し迷子になっているように感じます。
これが私のコードです:
//ItemView
define(['jquery','underscore','backbone','iCanHaz','models/Job','text!templates/JobItemView.tpl','marionette'],
function( $, _, Backbone, ich, Job, jobTemplate, Marionette) {
var JobView = Marionette.ItemView.extend({
tagName: 'tr',
template: jobTemplate,
});
return JobView;
});
// CompositeView
define(['jquery','underscore','backbone','collections/JobList','views/JobItemView','marionette','text!templates/JobListView.tpl'],
function( $, _, Backbone, JobCollection, JobView, Marionette, JobListTpl ) { /*function for instantiating the module or object*/
var JobListView = Marionette.CompositeView.extend({
itemView: JobView,
template: JobListTpl,
itemViewContainer: "tbody",
});
return JobListView;
});
// Item Template (jobTemplate)
<td>
<a href="{{ url }}" rel="nofollow" target="_blank">
{{ title }}
</a>
</td>
<td>{{ status }}</td>
<td>{{ created_at }}</td>
// Composite Template (JobListTpl)
<table class="table table-striped" id="jobs-table">
<thead>
<tr>
<th>Title</th>
<th>Status</th>
<th>created</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="8">
Stuff in here
</td>
</tr>
</tfoot>
</table>
//Main HTML page
<div class="tab-content">
<div class="tab-pane active" id="jobPanel">
//stuff in here
</div>
//other stuff in here
//app.js
define(['backbone','marionette','iCanHaz','collections/JobList','views/JobListView'],
function(Backbone, marionette, ich, JobList, JobListView){
var app = new marionette.Application(),
jobList = new JobList();
app.addRegions({
main : '#content',
jobsPanel: "#jobPanel"
});
app.addInitializer(function(){
//For using Marionette with ICH
Backbone.Marionette.Renderer.render = function(template, data){
if (_.isUndefined(ich[templateName])){
var templateName;
ich.addTemplate(templateName, template);
};
return ich[templateName](data);
}
var viewOptions = {
collection : jobList
};
app.jobsPanel.show(new JobListView(viewOptions));
jobList.fetch({validate:true});
});
return app;
}
);
//main.js for RequireJS config
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
backboneLocalstorage: {
deps: ['backbone'],
exports: 'Store'
},
marionette : {
exports : 'Backbone.Marionette',
deps : ['backbone']
},
iCanHaz:{
deps: ['jquery'],
exports: 'ich'
}
},
optimize: "none",
paths: {
jquery: "require-jquery",
underscore: '../lib/backbone/underscore-min',
backbone: '../lib/backbone/backbone',
marionette : '../lib/backbone/backbone.marionette.min',
iCanHaz: '../lib/backbone/ICanHaz_ReqJS_Compatible',
backboneLocalstorage: '../lib/backbone/extras/backbone.localStorage',
text: '../lib/require/text',
}
});
require(['app','backbone'],function(app,Backbone){
app.start();
});
これは 3 行の単純なテーブルを作成することになっていますが、実際には 3 つのネストされたテーブルが作成されます。これは (かなり) 醜い結果です: 3 つのレコードが取得されますが、表示されません。だから今、私は私がめちゃくちゃになっている部分を知りません。