Durandal 小部件“this.settings 未定义”

Question

我在App>durandal>widgets>selector 中有一个名为“selector”的 Durandal 小部件（热毛巾模板） 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;
});

widget的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>

widget的使用：

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

但我在var selected = this.settings.selectedTopLevel; 行中的函数selector.prototype.showSelect 有一些问题，主要错误是：

this.settings 未定义

另一个问题出现在那行html中：

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

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

我是 Durandal 小部件的新手，非常感谢任何帮助！

Answer 1

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

Answer 2

转载自上面的评论，以便于阅读：

我认为问题在于这些没有更新：

this.settings.showTopLevel(true);
this.settings.selectedTopLevel(null);

由于某些原因，在 durandal 小部件中声明的 observable 不会进入淘汰赛堆栈或未绑定到视图（不确定是哪一个）...

还不知道为什么。为了获得淘汰的可观察对象，我必须在父视图模型级别声明小部件级别所需的任何可观察对象，并使用设置将其传递。

如果你让它工作，请告诉我！