使用渲染骨干引导模式 [英] Rendering bootstrap modal using backbone
本文介绍了使用渲染骨干引导模式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我觉得一个code将更好地解释我的问题:
查看:
I think a code will explain better my problem: the View:
App.Views.ErrorModal = Backbone.View.extend({
template: window.template('errorModal'),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
this.$("#errorApproveModal").modal({
keyboard: true
});
return this;
}
});
实例化时:
var error = new App.Models.Errors({title: "Exporting Error", content: "Error"});
var errorModal = new App.Views.ErrorModal({model: error});
errorModal.render();
模态被加载,但我得到只是一个空div
The modal is loaded but i get only an empty div
感谢您的帮助!
罗伊
Thanks for the help! Roy
推荐答案
它总是更好地创建一个包含所有模态逻辑,然后从主视图称之为一个单独的类。
It always better to create a separate class that holds all Modal logic and then call it from the master view.
请尝试使用这种方法。
莫代尔JS
var BaseModalView = Backbone.View.extend({
id: 'base-modal',
className: 'modal fade hide',
template: 'modals/BaseModal',
events: {
'hidden': 'teardown'
},
initialize: function() {
_.bindAll(this, 'show', 'teardown', 'render', 'renderView');
this.render();
},
show: function() {
this.$el.modal('show');
},
teardown: function() {
this.$el.data('modal', null);
this.remove();
},
render: function() {
this.getTemplate(this.template, this.renderView);
return this;
},
renderView: function(template) {
this.$el.html(template());
this.$el.modal({show:false}); // dont show modal on instantiation
}
});
把手模板
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
父视图
//按钮点击以下燃煤
Parent View // on button click following fired
modalView = new BaseModalView();
modalView.show();
// Modal view automatically bound to the body and removes itself on hidden;
这篇关于使用渲染骨干引导模式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文