个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我将 Backbone 集合渲染为 select 元素，并且我希望它在顶部有一个空白的 option。
我有点不确定如何使用 Marionette CollectionView 最好地做到这一点。 (我知道 CompositeView 但我真的不觉得它适合这个用例)。
到目前为止，我已经尝试使用 onBeforeRender Hook 来添加选项
onBeforeRender: function() {
var option = $('<option>').html('')
this.$el.append(option);
}
我面临的问题是渲染实际上被调用了两次，因为我的CollectionView位于LayoutView内部，它在显示 View 时调用渲染函数
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 - 如何将空白选项添加到 Marionette CollectionView 生成的选择中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28395990/
25
4
0
我在 Storyboard 中有一个 collectionView，如下所示: 注意约束:Collection View.top = Search Bar.bottom 我不想要该行上方的 Colle
我有一个包含两个部分的 Collection View ，每个部分都有一个项目。部分中的单元格包含 Collection View ，我需要使高度单元格适合内容 Collection View 。 我
我见过将 Collection View 嵌套在 TableView 中的解决方案，但对于我的应用程序，我需要有 2 个 Collection View ，因为这样可以更轻松地执行其他操作。 因此，让
感谢帮助。 如上所示，CollectionView ItemSize.height 比 CollectionView.height 大。我只是在 viewDidLayoutSubviews() 中设置
我有一个collectionview(A)，它可以作为“卡片 View ”来滑动。在最后一个卡/单元格中，我有另一个 Collection View (B)来显示更多单元格。到目前为止，一切都很好!一
我正在寻找一种方法，当您滚动到 collectionView 中的另一个单元格时，可以更改 imageView 中的图像。 因此，当滚动单元格的 (1) 时，我想更改图像 (2)。 创建此内容的最佳方
我的 NSCollectionView 项目集成了另一个 NSCollectionView。一切都很好，但在第一个 View 中选择项目时就不行了。 当我设置collectionView1.isSel
我是一名 Android 开发者，正在尝试学习 iO 开发。 我正在尝试在水平分页滚动器内实现垂直滚动 UI(就像 ViewPager 内的 RecyclerView)。 我知道我应该使用嵌套的 UI
我在collectionView中有一个collectionView，我希望能够选择第二个collectionView中的一个单元格来执行到另一个ViewController的segue。 目前，当我
我有这两个代表: #pragma mark = UICollectionViewDataSource - (NSInteger)collectionView:(UICollectionView*)co
嘿，我正在尝试在我的动态 Collection View 单元格之后添加一个静态 Collection View 单元格。例如在我的屏幕截图中，在“Study Grind Edition” Colle
是否可以通过在 Collection View Cell .swift 文件中编写代码来阻止我的 Collection View 滚动。我希望能够在用户点击单元格中的按钮时停止滚动，然后在再次按下按钮
我有一个用例，我想要呈现一组collectionViews(或复合 View )。使用 marionette.js 执行此操作的最佳方法是什么？ 我的模型结构如下- A | |-- Collectio
我有一个 View Controller ，其中有 tableView 和 Collection View 。我为 collectionView 和 tableView 设置了相同的高度。 前半部分是
在 Visual Studio 2017 中，尝试存档 Xamarin Android 项目时，成功构建后出现以下错误: 无法创建应用程序存档“MyArchive”。这种类型的 CollectionV
我对 Collection View 完全陌生，请帮助我在 Collection View 中垂直和水平滚动单元格: viewcontroller.h #import @interface View
我在一个表格 View 单元格中有两个不同的 collectionView。原因是因为我试图找到实现一个水平 collectionView 和一个显示不同数据的垂直 collecitonView 的最
我想在另一个 collectionview 标题中实现一个 Collection View 幻灯片，但是当我尝试连接 uicollectionview 的导出时，我收到一条错误消息，指出导出无法连接到
您好，我已经为这个问题苦苦挣扎了一段时间，一直想不出来。 我想做的是，在 collectionview 单元格内按下一个按钮，然后执行到下一个单元格的转换。 这是我想在 collectionview
在 collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayo
我是一名优秀的程序员,十分优秀！