Durandal - 自定义模态单击事件绑定错误

Question

我遇到了海关模式的麻烦，并从模态视图模型中映射了点击事件。代码结构如下，首先我将headerView映射到像这样的shell.js ......

<div data-bind="compose:'viewmodels/header', preserveContext: true "></div>

然后在header.js中我需要一个单独的模块，通知....

Header.js

define(function (require) {
'use strict'

var ko = require('knockout'),
router = require('plugins/router'),
notification = require('models/notification');

var HeaderViewModel = function () {

var self = this;

self.title = ko.observable('');

self.toggleMenu = function () {
document.querySelector('nav').classList.toggle('selected');
};

self.setPage = function (target) {
document.querySelector('nav').classList.toggle('selected');
self.title(target);
//router.navigate('#' + target);
};

self.activate = function () {
notification.showMatch();
};

};

return new HeaderViewModel();
});

我将目标激活函数中的showMatch函数用于触发和测试模态。

notification.js

define(function (require) {

var Notification = function () {

var self = this;

var matcher = require('models/matcher'),
app = require('durandal/app'),
dialog = require('plugins/dialog'),
modalMatch = require('viewmodels/modalMatch');

self.showMatch = function () {

modalMatch.show().then(function(data) {
//callback function here (called after dialog is closed)
//also will return any passed data
alert('close test');
});

},


self.activate = function() {
this.showMatch();
}

};

return new Notification();
});

modalMatch.js

define(['plugins/dialog', 'plugins/router', 'knockout'], function (dialog, router, ko) {
"use strict";

var modalMatch = function (title) {
};

modalMatch.prototype.ok = function () {
dialog.close(this);
};

modalMatch.prototype.go = function (target) {
dialog.close(this);
alert(target);
//router.navigate('#' + target);
};

modalMatch.prototype.show = function () {
return dialog.show(this);
};

return new modalMatch();
});

modalMatch.html

<div class="modal ">
<div class="box">
<h3 class="title">Title</h3>

<div class="section">
<a href="#" class="selected">Test</a>
</div>
<div class="section">
<a  data-bind="click: $parent.go('home')" class="button chat">Home</a>
<a  data-bind="click: $parent.go('chat')" class="button sign">Chat</a>
</div>
</div>
</div>

这将启动模态并且它将正确显示，但数据绑定单击不会响应应该警告目标参数的go函数调用，关闭对话框并导航到目标。

控制台将记录以下错误     无法处理绑定点击：function（）{return go（'chat'）}     消息：无法读取未定义的属性'close';     查看：views / modalMatch;     ModuleId：viewmodels / modalMatch

我想我已经错过了设置中的一些细节，感谢任何帮助。

Answer 1

而不是

 <a  data-bind="click: $parent.go('home')" class="button chat">Home</a>

使用：

 data-bind="click: function(){ $root.go('home'); }

或更好：

 data-bind="click: function(){ $root.go($data); }