2

App>durandal>widgets>selector 我在小部件的 controller.js 代码中有一个名为“选择器”的 Durandal 小部件（热毛巾模板） ：

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 未定义

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

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

selector.prototype.enableSelect单击“单击以启用”时未调用该函数。

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

4

2 回答 2

3

It's a KO issue. You need to wrap those calls to $parent in a function in order to preserve the "this" context I believe.

于 2013-04-25T18:02:02.023 回答
0

从上面的评论重新发布，以便于阅读：

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

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

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

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

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

于 2013-04-28T11:15:47.140 回答