如何在 Marionette 3+ 中实现已弃用的 CompositeView 功能?
How to achieve deprecated CompositeView functionality in Marionette 3+?
如最新Marionette docs所述:
CompositeView
is deprecated. You should use the replaceElement
option on Region.show
and
render a CollectionView
into a region inside a View
to achieve this functionality.
我还是不明白 CompositeView
现在应该如何实现功能。
以前,CompositeView
非常适合与这样的模板一起使用:
<script id="table-template" type="text/html">
<table>
<% if (items.length) { %>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<% } %>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="3">some footer information</td>
</tr>
</tfoot>
</table>
new MyCompositeView({
template: "#table-template",
templateContext: function() {
return { items: this.collection.toJSON() };
}
// ... other options
});
如果我们决定使用 LayoutView
而不是 CompositeView
那么我们需要手动编写很多事件绑定代码(例如显示/隐藏 table header基于 collection 中的项目数)。这让事情变得更难了。
没有CompositeView
,有没有干净而不复杂的生活方式?
感谢您的帮助或建议。
看起来Marionette 3 将摆脱一些概念,使框架整体更简单,更容易理解。
Marionette.View in 3 将包含来自 ItemView 和 LayoutView 的功能。 CompositeView 已被弃用,取而代之的是仅使用 RegionManager,它现在包含在 View 中。
v2 --> v3
View -> AbstractView
ItemView, LayoutView -> View
这是一个简单的应用示例:
var color_data = [ { title:'red' }, { title:'green' }, { title:'blue' } ];
var Color = Backbone.Model.extend({
defaults: { title: '' }
});
var Colors = Backbone.Collection.extend({
model: Color
});
var ColorView = Mn.View.extend({
tagName: 'tr',
template: '#colorTpl'
});
var ColorsView = Mn.CollectionView.extend({
tagName: 'tbody',
childView: ColorView
});
var AppView = Mn.View.extend({
template: '#appTpl',
templateContext: function(){
return {
items: this.collection.toJSON()
};
},
ui: {
input: '.input'
},
regions: {
list: {
selector: 'tbody',
replaceElement: true
},
},
onRender: function(){
this.getRegion('list').show(new ColorsView({
collection: this.collection
}));
},
events: {
'submit form': 'onSubmit'
},
onSubmit: function(e){
e.preventDefault();
this.collection.add({
title: this.ui.input.val()
});
this.ui.input.val('');
}
});
var appView = new AppView({
collection: new Colors(color_data)
});
appView.render().$el.appendTo(document.body);
<script src='http://libjs.surge.sh/jquery2.2.2-underscore1.8.3-backbone1.3.2-radio1.0.4-babysitter0.1.11-marionette3rc1.js'></script>
<script id="colorTpl" type="text/template">
<td><%=title%></td>
<td style="background-color:<%=title%>"> </td>
</script>
<script id="appTpl" type="text/template">
<table width="100%">
<% if(items.length) { %>
<thead>
<tr>
<th width="1%">Title</th>
<th>Color</th>
</tr>
</thead>
<% } %>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="2">
<form><input type="text" class="input" autofocus><input type="submit" value="Add Color"></form>
</td>
</tr>
</tfoot>
</table>
</script>
如最新Marionette docs所述:
CompositeView
is deprecated. You should use thereplaceElement
option onRegion.show
and render aCollectionView
into a region inside aView
to achieve this functionality.
我还是不明白 CompositeView
现在应该如何实现功能。
以前,CompositeView
非常适合与这样的模板一起使用:
<script id="table-template" type="text/html">
<table>
<% if (items.length) { %>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<% } %>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="3">some footer information</td>
</tr>
</tfoot>
</table>
new MyCompositeView({
template: "#table-template",
templateContext: function() {
return { items: this.collection.toJSON() };
}
// ... other options
});
如果我们决定使用 LayoutView
而不是 CompositeView
那么我们需要手动编写很多事件绑定代码(例如显示/隐藏 table header基于 collection 中的项目数)。这让事情变得更难了。
没有CompositeView
,有没有干净而不复杂的生活方式?
感谢您的帮助或建议。
看起来Marionette 3 将摆脱一些概念,使框架整体更简单,更容易理解。
Marionette.View in 3 将包含来自 ItemView 和 LayoutView 的功能。 CompositeView 已被弃用,取而代之的是仅使用 RegionManager,它现在包含在 View 中。
v2 --> v3
View -> AbstractView
ItemView, LayoutView -> View
这是一个简单的应用示例:
var color_data = [ { title:'red' }, { title:'green' }, { title:'blue' } ];
var Color = Backbone.Model.extend({
defaults: { title: '' }
});
var Colors = Backbone.Collection.extend({
model: Color
});
var ColorView = Mn.View.extend({
tagName: 'tr',
template: '#colorTpl'
});
var ColorsView = Mn.CollectionView.extend({
tagName: 'tbody',
childView: ColorView
});
var AppView = Mn.View.extend({
template: '#appTpl',
templateContext: function(){
return {
items: this.collection.toJSON()
};
},
ui: {
input: '.input'
},
regions: {
list: {
selector: 'tbody',
replaceElement: true
},
},
onRender: function(){
this.getRegion('list').show(new ColorsView({
collection: this.collection
}));
},
events: {
'submit form': 'onSubmit'
},
onSubmit: function(e){
e.preventDefault();
this.collection.add({
title: this.ui.input.val()
});
this.ui.input.val('');
}
});
var appView = new AppView({
collection: new Colors(color_data)
});
appView.render().$el.appendTo(document.body);
<script src='http://libjs.surge.sh/jquery2.2.2-underscore1.8.3-backbone1.3.2-radio1.0.4-babysitter0.1.11-marionette3rc1.js'></script>
<script id="colorTpl" type="text/template">
<td><%=title%></td>
<td style="background-color:<%=title%>"> </td>
</script>
<script id="appTpl" type="text/template">
<table width="100%">
<% if(items.length) { %>
<thead>
<tr>
<th width="1%">Title</th>
<th>Color</th>
</tr>
</thead>
<% } %>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="2">
<form><input type="text" class="input" autofocus><input type="submit" value="Add Color"></form>
</td>
</tr>
</tfoot>
</table>
</script>