Durandal - 自定义模式点击事件绑定错误

Question

我在自定义模式和从模式视图模型映射点击事件时遇到问题。代码结构如下，首先我在 shell.js 中映射一个 headerView 像这样......

<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') } 消息：无法读取未定义的属性“关闭”； 视图：视图/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); }