CODEWITHSUNDEEP
knockout.jsdurandal
Suhas
Suhas

Reputation: 8448

Durandaljs and knockoutjs - Data bindings are not working

I would try to be as succinct as possible. I am using DurandalJs, HotTowel SPA template. I have added following viewmodel

define(['services/logger'], function (logger) {
    title = 'Content';
    unpublishedContent = ko.observable('default');

    activate = function() {
        logger.log(title + ' View Activated', null, title, true);
        return true;
    }

    unpublishedContent.subscribe(function (newValue) {
        logger.log('New value is: ' + newValue);
    });
    return {
        activate: activate,
        title: title,
        unpublishedContent: unpublishedContent,
        save: function (data) {
            self = this;
            logger.log(' Content saved - ' + self.unpublishedContent(), null, title, true);
        }
    };
});

And following view

<section>
    <div class="row">
        <div class="col-md-4">Left section</div>
        <div class="col-md-8">
            <form class="form-horizontal" role="form" data-bind="submit: save">
                <div class="form-group">
                    <label for="html" class="col-lg-3">Html</label>
                    <div class="col-lg-9">
                        <textarea class="form-control" data-bind="text: unpublishedContent"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-3">Your HTML</label>
                    <label class="col-lg-9" data-bind="text: unpublishedContent"></label>
                </div>
                <div class="form-group">
                    <div class="col-lg-offset-3 col-lg-9">
                        <button type="submit" class="btn btn-default">Save</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</section>

Few points to note here

  1. unpublishedContent property a ko.observable
  2. unpublishedContent is bound to a textarea and a label
  3. save method is bound to form using submit binding

While my submit binding is working, the binding on unpublishedContentis not working. I might be making a simple mistake somewhere but I am not able to spot, problably need a second pair of eyes looking at it.

I have enabled debugging in durandal but I do not get much out of durandal's logging for one, it does not show anything related to ko and second, I think I am too new to durandal to understand it's debug messages.

Upvotes: 1

Views: 338

Answers (1)

nemesv
nemesv

Reputation: 139748

You are using the wrong binding (text) on your <textarea>. What you need is the value binding.

From the documentation:

The value binding links the associated DOM element’s value with a property on your view model. This is typically useful with form elements such as <input>, <select> and <textarea>.

So change your view to:

<textarea class="form-control" data-bind="value: unpublishedContent"></textarea>

Upvotes: 2

Related Questions