我创建了一个简化的示例,您可以将其用作起点。它由一个索引视图/虚拟机组成,可以选择在自定义模式中打开现有视图/虚拟机。现有视图模型会在关闭时返回,以便可以访问。
index.js
define(function(require){
"use strict";
var app = require('durandal/app'),
CustomDialog = require('./customModal'),
Existing = require('./existingView'),
ctor;
ctor = function(){
this.dialog;
};
ctor.prototype.showCustomModal = function(){
this.dialog = new CustomDialog('My title', new Existing());
this.dialog.show().then(function(response){
app.showMessage('Model title "' + response.title + '".');
});
};
return ctor;
});
索引.html
<div>
<h3>Durandal 2.0 custom dialog</h3>
<a href="#" data-bind="click: $data.showCustomModal">click here </a> to open an existing view model in a custom
dialog.
</div>
自定义Modal.js
define(['plugins/dialog'], function (dialog) {
var CustomModal = function (title, model) {
this.title = title;
this.model = model;
};
CustomModal.prototype.ok = function() {
dialog.close(this, this.model);
};
CustomModal.prototype.show = function(){
return dialog.show(this);
};
return CustomModal;
});
自定义模态.html
<div class="messageBox">
<div class="modal-header">
<h3 data-bind="text: title"></h3>
</div>
<div class="modal-body">
<!--ko compose: $data.model-->
<!--/ko-->
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bind="click: ok">Ok</button>
</div>
</div>
现有View.js
define(function () {
var ctor = function () {
this.title = 'I\'m an existing view';
};
return ctor;
});
现有视图.html
<p data-bind="text: title"></p>
现场版本可在http://dfiddle.github.io/dFiddle-2.0/#so/21821997。随意分叉。