主干/木偶:将视图事件添加到一个为引导模式动态添加的视图中
Backbone/Marionette: Adding view events to a dynamically added view for a bootstrap modal
我有一个木偶布局,为了演示,html看起来像:
<header id="header-region" class="page-title"></header>
<section id="template-content" class="full-section">
<div id="error-messages" class="fade main-section"><!-- errors --></div>
<div id="content-region"> </div>
</section>
它的布局视图的区域是:
regions: {
header: "#header-region",
content: "#content-region"
}
到目前为止,我已经在页面的模板html中包含了任何给定页面的模态html,这将包含在content
区域。
我有一个想法,现在创建一个单独的区域,以显示情态。修改如下:
模板:
<section id="template-content" class="full-section">
<div id="error-messages" class="fade main-section"><!-- errors --></div>
<div id="content-region"> </div>
<div id="modal-region"></div>
</section>
和区域:
regions: {
header: "#header-region",
content: "#content-region",
modal: "#modal-region"
}
所以我希望能够做这样的事情:
// Controller
define([], function(){
initialize: function(){},
showHeaderView: function(){
this.HeaderView = new HeaderView();
this.layout.header.show(this.HeaderView);
},
showContentView: function(){
// this.BodyView's template used to contain the modal html
this.BodyView = new BodyView();
this.layout.content.show(this.BodyView);
},
showModalView: function(){
this.ModalView = new ModalView();
this.layout.modal.show(this.ModalView);
}
});
这个方法可以正常渲染模态,但是模态的事件丢失了,因为它们最初是由This . bodyview设置的。
模式有一个复选框,在change
上运行一个在此上的函数。但我想为这个绑定事件。来自this。bodyview的ModalView。
我怎么才能做到呢?我试过做这个。ModalView和这个是一样的。BodyView,但这破坏了一些东西。我也试过使用delegateEvents
,但没有运气。
这个视频完全符合您的要求:http://www.backbonerails.com/screencasts/building-dialogs-with-custom-regions
代码在这里:https://github.com/brian-mann/sc01-dialogs
如果你有HeaderView作为ItemView(或CollectionView/CompositeView)在它,你可以实例化它与传递参数,如
new HeaderView({events:{
"click .x" : function(){} // your function in-line or reference
});
同样适用于ModalView
相关文章:
- 如何在不使用ajax的情况下将pair值添加到数组并发送到django中的视图
- 在不刷新整个网格的情况下,向Asp.net网格视图添加新行
- 通过格式化将jquery移动组件动态添加到列表视图中
- 将行从数据库添加到表视图
- 如何将Web视图添加到Appgyver中的视图中
- 将范围添加到角度种子默认视图控制器时,测试套件现在失败
- 完整日历 - 如何在周视图中添加一天中的时间
- 将多个事件动态添加到多个 Web 视图
- 主干.js绑定到集合“添加”呈现视图两次
- 添加视图框时更改鼠标位置
- Django 管理员添加视图弹出对话框
- 正在向网站上的外部链接添加视图计数
- 以编程方式添加视图,然后引用这些视图
- 在Backbone.js中根据条件向不同的el添加视图
- 如何向窗口和视图数组添加视图
- angularjs在解析延迟加载脚本和分别添加视图控制器时会抛出Error: [ng:areq]
- 添加视图打开窗口在钛
- 如何使用if语句删除和添加视图
- 在视图中添加视图只会使android应用程序崩溃
- 用JS添加视图细节按钮