我编写了一个函数(基于我在Internet上找到的其他函数),该函数可帮助显示动态生成的模式,而无需在页面的HTML中创建模式。
为简化代码分析,请简要介绍:
- 我向Knockout添加了新的绑定处理程序,以允许在特定元素上禁用绑定
- 模态是使用Mustache从模板生成的
- 小胡子填写模态的相关部分(标题,正文,按钮)
- 模态包装在div中,它将停止数据绑定(
modalWrapper
) - ...以便我可以使用
ko.applyBindings
将自定义viewmodel应用于模式
-
按钮会根据描述自动生成,例如:
{ label: "OK",cssClass: "default",handler: "handleclick",// sets data-bind="click: handleclick" autoClose: true // adds data-dismiss="modal" }
代码的相关部分如下:
ko.bindingHandlers.stopBinding = {
init: function () {
return { controlsDescendantBindings: true };
}
};
var modalTemplate = '<div class="modal fade">\
<div class="modal-dialog {{size}}">\
<div class="modal-content">\
<div class="modal-header">\
<h5 class="modal-title">{{title}}</h5>\
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\
</div>\
<div class="modal-body">{{&body}}</div>\
<div class="modal-footer">{{&buttons}}</div>\
</div>\
</div>\
</div>';
/**
* Displays modal on the screen.
* @param {Object} options Options
* @param {string} options.title Title of the modal
* @param {html} options.body Body of the modal
* @param {string} options.size Size of the modal. Can be small,default,large or xlarge.
* @param {Object} options.actions Describes buttons to display on the modal. For each,specify label,cssClass,handler and optionally autoClose.
*/
var showModal = function(options) {
options = options || {};
options = $.extend({
title: '',body: '',size: false,actions: false,viewModel: {}
},options);
var modalClass = {
small: "modal-sm",default: "",large: "modal-lg",xlarge: "modal-xl"
};
var modalWrapper = $('<div data-bind="stopBinding: true"></div>').appendTo('body');
var buttons;
if (options.actions === false) {
buttons = '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
} else {
buttons = "";
for (var i = 0,len = options.actions.length; i < len; i++) {
var currentButton = $.extend({
label: '<No label>',cssClass: 'default',handler: '',autoClose: true
},options.actions[i]);
var btn = '<button type="button" class="btn ' +
options.actions[i].cssClass +
'" data-bind="click: ' +
options.actions[i].handler +
(options.actions[i].autoClose === true ? '" data-dismiss="modal"' : '')
+ '>'
+ options.actions[i].label
+ '</button>';
buttons += btn;
}
}
var templateData = {
title: options.title,body: options.body,size: modalClass[options.size],buttons: buttons
};
var modalHtml = Mustache.render(modalTemplate,templateData);
var $modal = $(modalHtml).appendTo(modalWrapper);
$modal.on('hidden.bs.modal',function (e) {
modalWrapper.remove();
});
ko.applyBindings(options.viewModel,$modal.get()[0]);
$modal.modal(options);
};
此自动关闭功能存在问题。如果启用,则视图模型将处理click,模态将由Bootstrap机制关闭,然后在隐藏后从DOM中删除。
但是当我希望按钮不自动关闭时,我无法从viewmodel中关闭模式。我想到的解决方案是为viewmodel注入一种方法,例如:
viewmodel['close'] = function() { $modal.modal('hide'); };
但是,这似乎是一个棘手的解决方案(即使对于Javascript也是如此)。同样,我可以将$modal
本身注入到视图模型中,但这将更加难看。
那么从模态的视图模型中关闭模态的最佳方法是什么?