Durandal, observable non-singelton module without explicitly making them observables

Question

I have my html file that looks like this:

<section>
    <h1>hei</h1>
    <form class="form-inline" role="form">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="name" data-bind="textInput: test">
        </div>
        <span data-bind="text: test">Search</span>
    </form>
</section>

and my JS file that looks like the following:

define(function () {
    return function() {
        var self = this;
        self.test = 'blah';

        self.activate = function() {
            console.log('test');
        }
    };
});

This produces the page and loads perfectly. I would assume that if i change the text in the input box, the span would update accordingly. This is unfortunatly not the case, and i cannot understand why not.

If i however change the JS file to this:

define(['plugins/observable'],  function (observable) {
    return function() {
        var self = this;
        self.test = 'blah';
        self.activate = function() {
            console.log('test');
        }
        observable(self, 'test').subscribe(function (newValue) {
            console.log("variable updated", self.test);
        });
    };
});

The behavior is as expected. How can i configure Durandal to make self.test an observable without having to make it so explicitly? I thought this was some of the inbuildt-Durandal-feature?

score 1 · Accepted Answer · answered Dec 08 '14 at 21:21

It seems like the observable plugin is not enabled. Please check that your Durandal startup code enables it, like this from the documentation:

define(['durandal/app'],  function (app) {
    app.configurePlugins({
        observable: true  // <-- This enabled the observable plugin
    });

    app.start().then(function () {
        app.setRoot('shell');
    });
});

See the docs here: http://durandaljs.com/documentation/Binding-Plain-Javascript-Objects.html

Durandal, observable non-singelton module without explicitly making them observables

1 Answers1