我正在使用BackboneJS和Bootstrap来创建模态视图。它是一个细节面板,在单击模型视图时呈现。我正在构建如下:
项目视图:
myApp.ItemView = Backbone.View.extend({
events : {
'click' : 'itemClick',
},
itemClick: function(){
this.detailsView.render(this.item);
},
})
模式视图:
DetailsPageView = Backbone.View.extend({
id:'myModal',
initialize: function(){
var self=this;
_.templateSettings = {interpolate : /\{@=(.+?)@\}/g, evaluate : /\{@(.+?)@\}/g };
this.template = _.template($('#myModal').html());
},
render: function(item){
this.$el.html(this.template({item: item}));
this.item = item;
this.setupItem(item);
this.show();
return this;
},
show: function() {
this.$el.modal('show');
return this;
},
})
HTML:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="true" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content antiAlias" style="width:800px;font-family:Arial,'Helvetica',sans-serif;">
<div class="modal-header" style="border:0px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>{@= item.get('item_name') @}</div>
</div>
</div>
</div>
</div>
使用默认效果按预期渲染。我可以用html上显示的关闭按钮关闭它。
问题是:我无法通过单击ESC或在模态背景中关闭对话框。我试图绑定hidden.bs.modal事件来调用它。$ el.modal('hide')但我无法以任何方式绑定它。
谢谢