質問
イニシャライザを介してモデルを受け取る itemview があります。itemview がレンダリングされると、各モデル プロパティのビューの要素に属性が追加されます。
なぜこれが起こるのですか?どうすればこれを防ぐことができますか?
シナリオ例
私が持っているコードの簡単な例は次のようになります。
var MyView = Marionette.ItemView.extend({
tagName: 'div',
id: 'myView',
className: 'myClass',
template: someTemplate,
initialize: function(model) {
this.model = model;
}
});
var myView = new MyView(someBackboneModel);
myView.render();
モデルに値「124」の「id」属性があると仮定すると、これは次のような要素になります。
<div id="124" foo="foo" bar="bar" class="myClass">
<!-- blabla -->
</div>
問題
ご覧のとおり、MyView クラスに設定された id 値は、モデルの id プロパティに置き換えられます。
私のアプリには、この動作を示さず、モデル属性を $el にまったく追加しない ItemView 要素をレンダリングする Backbone.Marionette.CollectionView によってレンダリングされる他の ItemViews があります。
何か案は？
Marionette Source と Backbone Source を調べてみましたが、今のところ原因がわかりません。
補遺
Derick Baileyのリクエストにより、この問題を引き起こしている完全なビューとテンプレートを次に示します。
景色：
var Admin_Applications_ApplicationReader_Application_View = Marionette.ItemView.extend({
tagName: "div",
id: "Admin-Applications-ApplicationReader-Application-View",
template: ApplicationTemplate,
templateHelpers: {
moment: Moment
},
initialize: function(model) {
this.model = model;
this.bindTo(this, 'layout', this.onLayout);
},
// Callbacks
//----------
onRender: function() {
var that = this;
setTimeout(function() {
that.onLayout();
var $scrollContainer = that.$el.find('#Admin-Applications-ApplicationReader-Body'),
scrollPane = new ScrollPane($scrollContainer, {
maxHeightProperty: 'maxHeight',
scrollUpButton: false,
scrollDownButton: false
});
}, 0);
},
// Layout
//-------
onLayout: function() {
var css;
// Calculate desktop styles
if ($(window).width() > 767) {
css = this.calculateBodyStyle();
}
else {
css = {
applicationBody: { height: 'auto' }
}
}
// apply styles
this.$el.find('#Admin-Applications-ApplicationReader-Body').css(css.applicationBody);
// re-initialize scroll-pane
this.$el.find('.scroll-container').trigger('scroll-pane:new-content');
},
calculateBodyStyle: function() {
var $title = this.$el.find('#Admin-Applications-ApplicationReader-Title'),
viewHeight = this.$el.height(),
titleHeight = $title.outerHeight(true),
bodyHeight = viewHeight - titleHeight,
css = {
applicationBody: { maxHeight: bodyHeight },
};
return css;
}
});
テンプレート:
<div id="Admin-Applications-ApplicationReader-Title" class="page-header no-top-margin">
<h2>Application
<span class="no-wrap"><small>Package: <%= package %>, </small></span>
<span class="no-wrap"><small><%= moment(submission_timestamp, 'YYYY-MM-DD HH:mm:ss').fromNow() %></small></span>
</h2>
</div>
<div id="Admin-Applications-ApplicationReader-Body" class="container-white scroll-container">
<ul class="application unstyled scroll-content">
<li class="section summary-section">
<div class="section-header">
<h3>Summary</h3>
</div>
<table class="section-body no-border table-condensed">
<tbody>
<tr>
<th>Package:</th>
<td><%= package %></td>
</tr>
<tr>
<th>Date of last flight:</th>
<td><%= date_of_last_flight %></td>
</tr>
<tr>
<th>Date of renewel:</th>
<td><%= date_of_ir_renewel %></td>
</tr>
</tbody>
</table>
</li>
<!-- /.summary-section -->
<li class="section credentials-section">
<div class="section-header">
<h3>Credentials</h3>
</div>
<table class="section-body no-border table-condensed">
<tbody>
<tr>
<th>Pilot Training Institute:</th>
<td><%= pilot_training_institute %></td>
</tr>
<tr>
<th>Date of exam:</th>
<td><%= moment(date_of_exam).format('DD-MM-YYYY') %></td>
</tr>
<tr>
<th>Date of last flight:</th>
<td><%= moment(date_of_last_flight).format('DD-MM-YYYY') %></td>
</tr>
<tr>
<th>Date of MCC Certificate:</th>
<td><%= moment(date_of_mcc_certificate).format('DD-MM-YYYY') %></td>
</tr>
<tr>
<th>Date of renewel:</th>
<td><%= moment(date_of_ir_renewel).format('DD-MM-YYYY') %></td>
</tr>
</tbody>
</table>
</li>
<!-- /.credentials-section -->
<li class="section personal-information-section">
<div class="section-header">
<h3>Personal information</h3>
</div>
<table class="section-body no-border table-condensed">
<tbody>
<tr>
<th>Name:</th>
<td><%= [first_name, last_name].join(' ') %></td>
</tr>
<tr>
<th>Adress:</th>
<td><%= address %></td>
</tr>
<tr>
<th>Zip code:</th>
<td><%= zip_code %></td>
</tr>
<tr>
<th>City:</th>
<td><%= city %></td>
</tr>
<tr>
<th>Country:</th>
<td><%= country %></td>
</tr>
<tr>
<th>Language:</th>
<td><%= language %></td>
</tr>
<tr>
<th>Telephone:</th>
<td><%= telephone %></td>
</tr>
<tr>
<th>Celĺphone:</th>
<td><%= cell_phone %></td>
</tr>
<tr>
<th>E-mail:</th>
<td><%= email %></td>
</tr>
<tr>
<th>Date of birth:</th>
<td><%= moment(date_of_birth).format('DD-MM-YYYY') %></td>
</tr>
</tbody>
</table>
</li>
<!-- /.personal-information-section -->
</ul>
<!-- /.application.scroll-content -->
</div>