Backbone JS视图中的Bootstrap模式未在后台单击或转义键上关闭

时间:2014-04-03 14:02:20

标签: twitter-bootstrap backbone.js

我正在使用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">&times;</button>
        <div>{@= item.get('item_name') @}</div>
      </div>
    </div>
  </div>

</div>

使用默认效果按预期渲染。我可以用html上显示的关闭按钮关闭它。

问题是:我无法通过单击ESC或在模态背景中关闭对话框。我试图绑定hidden.bs.modal事件来调用它。$ el.modal('hide')但我无法以任何方式绑定它。

谢谢

0 个答案:

没有答案