widget - Durandal 小部件 "this.settings is undefined"

Question

我在 App>durandal>widgets>selector 中有一个名为“选择器”的 Durandal 小部件( Hot Towel 模板)
widget的controller.js代码:

define(function (require) {
var widget = require('durandal/widget');

var selector = function (element, settings) {
    settings.selectedTopLevel = ko.observable();
    settings.showTopLevel = ko.observable(true);

    this.settings = settings;
};

selector.prototype.enableSelect = function() {
    this.settings.showTopLevel(true);
    this.settings.selectedTopLevel(null);
};

selector.prototype.showSelect = function () {
    var selected = this.settings.selectedTopLevel;
    alert(this.selected.name().toString());
};

return selector;
});

小部件的view.html:

<span>
<a href="#" data-bind="click: $parent.enableSelect"> Click to enable </a>

<span data-bind="visible: settings.showTopLevel">
    <select data-bind="options: settings.items, optionsText: 'name', optionsCaption: 'Select...', value: settings.selectedTopLevel"></select>
</span>
<br/>

<span data-bind="foreach: settings.items">
    <a href="#" data-bind="click: $parent.showSelect">
        <span data-bind="text: name"></span>
    </a>
</span>

小部件的使用:

<div>
<h2>Widget Selector:</h2>
<div data-bind="widget: { kind: 'selector', items: $root.projects }"></div>

但是我在功能上有一些问题 selector.prototype.showSelect在线 var selected = this.settings.selectedTopLevel;主要错误是:

this.settings is undefined

另一个问题出现在该行 html 中:

<a href="#" data-bind="click: $parent.enableSelect"> Click to enable </a>

函数 selector.prototype.enableSelect当我点击“点击启用”时没有调用。

我是 Durandal 小部件的新手，请提供任何帮助，非常感谢!

Answer 1

这是一个KO问题。您需要将这些对 $parent 的调用包装在一个函数中，以保留我认为的“this”上下文。