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.