Cannot make data to be bind-able inside of the widget

Question

once i change value of input, my main model ($data.name) is not updated.

Thanks in advance

some view

<td data-bind="editableLabel: { name: $data.name }"></td>

widget's view

<span data-bind="text: settings.name, click: edit, visible: !settings.inEditMode"></span>
<div class="input-group" data-bind="visible: settings.inEditMode">
    <input class="form-control" data-bind="value: settings.name" />
    <span class="input-group-btn">
        <button class="btn btn-success" type="button" data-bind="click: save"><span class="glyphicon glyphicon-ok"></span></button>
        <button class="btn btn-danger" type="button" data-bind="click: reset"><span class="glyphicon glyphicon-remove"></span></button>
    </span>
</div>

widget's viewmodel

define(['context/context'], function (context) {
    var ctor = function () { };


    ctor.prototype.activate = function (settings) {
        this.settings = settings;
        this.settings.inEditMode = false;
    };


    ctor.prototype.edit = function () {
        this.settings.inEditMode = true;
    };


    ctor.prototype.save = function () {
        this.settings.inEditMode = false;
        context.save();
    };


    ctor.prototype.reset = function () {
        this.settings.inEditMode = false;
    };


    return ctor;
});

score 0 · Answer 1 · answered Aug 25 '14 at 08:49

In the following line of code you are passing a reference to a property of the current VM (nameproperty) to the widget:

<td data-bind="editableLabel: { name: $data.name }"></td>

I suspect that the property name that you are passing to the widget is not a observable. If it isn't, then you are just passing a reference to a property which contains only a value and therefore it will not trigger any change event if it gets updated.

Cannot make data to be bind-able inside of the widget

1 Answers1