Durandal widget "this.settings is undefined"

Question

I have a Durandal widget (hot towel template) named "selector" in App>durandal>widgets>selector The code of controller.js of widget:

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;
});

The view.html of widget:

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

The use of widget:

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

But I have some problems in function selector.prototype.showSelect in line var selected = this.settings.selectedTopLevel; the principal error is:

this.settings is undefined

The other problem appear in that line of html:

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

The function selector.prototype.enableSelect isn't call when I clicked in "Click to enable".

I am new in Durandal widget, please any help much appreciated!

Answer 1

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.

Answer 2

Reposted from comment above to make easier to read:

I think the issue is these are not updating:

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

For some reason observables that are declared in durandal widgets don't enter the knockout stack or aren't bound to the view (not sure which one)...

Not sure why yet. To get knockout observables I had to declare any observables needed at the widget level at the parent viewmodel's level and pass it in using the settings.

Let me know if you get it to work!