MVVM calculated field not updated when dependant field changed

[Al]

Hi there,

I am at the moment implementing a dirty check using kendo MVVM calculated field, here is the code snippet


function viewModelSource(data) {    
    if (this instanceof viewModelSource) {
        this.Title = data.title;

        // dirty flag
        this.IsDirty = false;
        this.resetDirty = function () {
            this.set("IsDirty", false);
        }
        this.CheckDirty = function () {
           
            this.get("Title");
            this.set("IsDirty", true);
        }
    }
}

var viewModel = kendo.observable(new viewModelSource(data));
kendo.bind($container, viewModel);

<div>
<input type="text" data-bind="value: Title" />
</div>

The problem is when the input value changes, I expect the dirty flag to be set to true, but it never was.

any help would be appreciated.

Thanks
James

[Daniel]

Hello James,

The dependent method should be bound to an element in order for it to be called when a dependent value is changed:

<div>
    <input type="text" data-bind="value: Title" />
    <span data-bind="text: CheckDirty"></span>
</div>

Otherwise, you should use the change event in order to set the IsDirty flag when the Title changes:

var viewModel = kendo.observable(new viewModelSource(data));
viewModel.bind("change", function (e) {
    if (e.field == "Title") {
        this.set("IsDirty", true);
    }
});

Regards,
Daniel
Telerik