问题描述
我希望创建一个Durandal自定义对话框,在现有的可组合视图模型周围添加带有标题和页脚的窗口框架.
I wish to make a Durandal custom dialog that adds a window frame with title and footer around an existing composable viewmodel.
我已经制作了一个customModal.html模板
I have made a customModal.html template
<div class="messageBox">
<div class="modal-header">
<h3 data-bind="text: title"></h3>
</div>
<div class="modal-body">
<!--ko compose: { model: model, template: view }-->
<!--/ko-->
</div>
<div class="modal-footer" data-bind="foreach: options">
<button class="btn" data-bind="click: function () { $parent.selectOption($data); }, text: $data, css: { 'btn-primary': $index() == 0, autofocus: $index() == 0 }"></button>
</div>
</div>
如您所见,我希望在customModal模板的主体内组成一个viewmodel.这样一来,传入的视图模型就不会与模式显示绑定,而是可以轻松地使用它.
As you can see I wish to compose a viewmodel within the body of the customModal template. This is so that the viewmodel passed in is not tied to a modal display but can easily use one.
我已经制作了一个customModal.js模型,
I have made a customModal.js model like this:
define(['plugins/dialog'], function (dialog) {
var CustomModal = function (title, model, view, options) {
this.title = title;
this.model = model;
this.view = view;
this.options = options;
};
CustomModal.prototype.selectOption = function (dialogResult) {
dialog.close(this, dialogResult);
};
return CustomModal;
});
但是当我尝试使用它时,组合绑定会搜索模板'.html'并失败.
But when I try and use it the compose binding searches for the template '.html' and fails.
我在这里错过了什么吗?这真的是最好的方法吗?
Am I missing something here? And is this really the best way to do this?
谢谢.
推荐答案
我创建了一个简化的示例,您可以将其用作起点.它由一个索引视图/vm组成,可以选择在customModal中打开一个现有视图/vm.现有视图模型会在关闭时返回,以便可以访问.
I created a simplified example that you can use as starting point. It consists of an index view/vm that optionally opens an existing view/vm in a customModal. The existing view model is returned on close so that it's accessible.
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;
});
index.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>
customModal.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;
});
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>
existingView.js
define(function () {
var ctor = function () {
this.title = 'I\'m an existing view';
};
return ctor;
});
existingView.html
<p data-bind="text: title"></p>
实时版本可在 http://dfiddle.github.io/dFiddle-2.0/#so/21821997中获得.随意分叉.
Live version available at http://dfiddle.github.io/dFiddle-2.0/#so/21821997. Feel free to fork.
这篇关于Durandal 2.0自定义对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!