问题
我有一个 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 属性替换。
我的应用程序中有其他 ItemViews 由 Backbone.Marionette.CollectionView 呈现,它呈现没有表现出这种行为并且根本不将它们的模型属性添加到它们的 $el 的 ItemView 元素。
有任何想法吗?
我已经尝试在 Marionette Source 和 Backbone 源中进行挖掘,但到目前为止我找不到发生这种情况的原因。
附录
应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>