CODEWITHSUNDEEP
durandal-2.0
Glen Hughes
Glen Hughes

Reputation: 4812

Durandal widget does not update value in parent view model

I'm using Durandal with the observable plugin enabled to utilize ES5 getters and setters. I've created a simple widget that takes a value and binds it to a text box:

Here's the widget's viewmodel.js:

define([], function () {
    var ctor = function () {
        this.activate = function (settings) {
            this.value = settings.value;
        }
    };

    return ctor;
});

And here's the widget's view.html:

<span>
    This textbox is in the widget:
    <br />
    <input type="text" data-bind="value: value" />
</span>

When using the widget, if the value is passed in as a ko.observable, then everything works as expected. However, if I use the ES5 getter/setter method provided by the observable plugin, modifying the value in the widget does not cause the parent view model to be updated. Modifying the value in the parent view does update the widget though:

define(['durandal/app', 'knockout'], function (app, ko) {
    var ctor = function () {
        this.value = ko.observable('Test');  // This works as expected
        this.value = 'Test';  // This does not work
    };
    return ctor;
});

Here's the parent view:

<section>
    <h1>Widget Test</h1>
    This textbox is not in the widget:
    <br />
    <input type="text" data-bind="value: value" />
    <br /><br />
    <div data-bind="widget: { kind: 'testWidget', value: value }"></div>
</section>

Am I doing something wrong that is preventing the value from being pushed back to the parent view model?

Upvotes: 0

Views: 116

Answers (1)

Raju Errabelli
Raju Errabelli

Reputation: 36

You will have to define/use a observable property to make it two-way binding so that the changes made in view will be reflected in your View Model.

this.value = ko.observable('Test'); works for your requirement.

Upvotes: 0

Related Questions