如何将空白选项添加到木偶收藏视图生成的选择中
How do I add a blank option to a select generated by a Marionette CollectionView?
我正在将 Backbone 集合呈现为 select
元素,我希望它在顶部有一个空白option
。
我有点不确定如何使用木偶CollectionView
最好地做到这一点.(我知道CompositeView
但我真的觉得它不适合这个用例(。
到目前为止,我已经尝试使用 onBeforeRender
钩子添加选项
onBeforeRender: function() {
var option = $('<option>').html('')
this.$el.append(option);
}
我面临的问题是渲染实际上被调用了两次,因为我的CollectionView
在一个LayoutView
内,当它显示视图时调用渲染函数
this.getRegion('body').show(new SelectView({
collection: collection
}));
然后在重置其集合时再次触发渲染
collection.reset([{ name: 'a' },{ name: 'b' }]);
我已经通过使用调试器并查看调用堆栈来验证这是正在发生的事情。
完整片段:
$(document).ready(function() {
var collection = new Backbone.Collection({
model: Backbone.Model
});
var Layout = Backbone.Marionette.LayoutView.extend({
regions: {
body: '#main'
},
template: false,
onRender: function() {
this.getRegion('body').show(new SelectView({
collection: collection
}));
}
});
var OptionView = Backbone.Marionette.ItemView.extend({
tagName: 'option',
template: _.template('<%= name %>')
});
var SelectView = Backbone.Marionette.CollectionView.extend({
tagName: 'select',
childView: OptionView,
onBeforeRender: function() {
var option = $('<option>').html('')
this.$el.append(option);
}
});
var layout = new Layout({
el: $('#app')
});
layout.render();
var app = new Marionette.Application();
app.start();
Backbone.history.start();
collection.reset([{ name: 'a' },{ name: 'b' }]);
});
<script data-require="underscore.js@1.6.0" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="backbone.js@1.1.2" data-semver="1.1.2" src="http://backbonejs.org/backbone-min.js"></script>
<script data-require="marionette.js@2.2.2" data-semver="2.2.2" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.2/backbone.marionette.js"></script>
<body>
<div id="app">
<div id="main"></div>
</div>
</body>
现在,在此代码段中,我可以通过简单地在脚本开头而不是结束时重置集合来解决此问题,但在我的应用程序中,这不是一个可能的解决方案。
我可以想到一些解决方案,但它们都感觉有点不对劲,在我看来,我肯定不想为此保持任何状态。我能想到的最糟糕的事情就是改成
onBeforeRender: function() {
this.$el.html('')
var option = $('<option>').html('')
this.$el.append(option);
}
但是由于框架似乎并没有清空$el
本身,我猜这是有原因的。
这是CompositeView
的合法用例,还是我错过的其他聪明方法
如果CompositeView
对于此用例是可以的,解决方案是将CollectionView
更改为
var SelectView = Backbone.Marionette.CompositeView.extend({
template: _.template('<select><option></option></select>'),
childView: OptionView,
childViewContainer: 'select'
});
如本片段所示:
$(document).ready(function() {
var collection = new Backbone.Collection({
model: Backbone.Model
});
var Layout = Backbone.Marionette.LayoutView.extend({
regions: {
body: '#main'
},
template: false,
onRender: function() {
this.getRegion('body').show(new SelectView({
collection: collection
}));
}
});
var OptionView = Backbone.Marionette.ItemView.extend({
tagName: 'option',
template: _.template('<%= name %>')
});
var SelectView = Backbone.Marionette.CompositeView.extend({
template: _.template('<select><option></option></select>'),
childView: OptionView,
childViewContainer: 'select'
});
var layout = new Layout({
el: $('#app')
});
layout.render();
var app = new Marionette.Application();
app.start();
Backbone.history.start();
collection.reset([{ name: 'a' },{ name: 'b' }]);
});
<script data-require="underscore.js@1.6.0" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="backbone.js@1.1.2" data-semver="1.1.2" src="http://backbonejs.org/backbone-min.js"></script>
<script data-require="marionette.js@2.2.2" data-semver="2.2.2" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.2/backbone.marionette.js"></script>
<body>
<div id="app">
<div id="main"></div>
</div>
</body>
相关文章:
- 如何使用javascript从主svg对象动态创建svg视图框
- 正在使用$location.path(.)路由ng视图
- angular.js没有'无法在PhoneGap中处理视图标记
- 如何包含特定于每个视图angularjs的javascript文件
- 通过在Dojo mobile ViewController.openExternalView中动态更改打开同一外部视图的
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- Ajax Live搜索发布到Laravel视图
- backbone.js无法渲染视图
- 根据某些条件在视图之间切换
- ng视图外的链接重定向到ng视图内的页面
- 如何在Jquery中发布后将值从视图返回到控制器
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 使用Scala Play Framework视图中的键检索映射值
- FF视图源|脚本高亮显示为红色
- 如何使bxslider仅在移动视图中处于活动状态
- 为什么不't我的变量在我的控制器中填充后在我的视图中呈现
- 如何将空白选项添加到木偶收藏视图生成的选择中
- 仅重新渲染木偶.js收藏视图的更改部分
- 从木偶中的空视图添加到收藏
- 木偶收藏视图在收集.fetch后不会重新渲染