Question

我在App>durandal>widgets>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>

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

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小部件中声明的可观察对象不会进入淘汰堆栈或未绑定到视图（不确定哪一个）......

还不确定为什么。为了获得淘汰可观察量，我必须在父视图模型的级别上声明窗口小部件级别所需的任何可观察量，并使用设置传递它。

如果你让它发挥作用，请告诉我！

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

2 个答案: