Kendo UI - Property Changed MVVM

Question

I seem to be having issues databinding 'calculated' fields with Kendo UI.

I am attempting to do data-binding with several what I will call 'calculated' fields. I have a grid, several buttons, filters and some sorting on a page that are all using the same datasource, an observable array called 'allItems'. allItems is populated via a service call and sorted, manipulated and otherwise changed while the user is on the page via buttons.

There are several navigational buttons and several div's that are populated based on information in the previous item, current item and next item in accordance to the current filters and sorts applied. Those buttons contain information in them that is extracted from the previous, current and next items as they related to the allItems list (ie the objects are actually held in the allItems array and are in fact observable objects).

so in the viewmodel object I have something like this (please excuse short handing):

var viewmodel = kendo.observable({
var allItems = observablearray[]

var currentIndex = 1; //or other default value

var changeCurrentItem = function(){
    var self = this;
    //do some stuff
    //stuff might include modification to allItems
    self.set("currentIndex", someNewValue);
}

var previousItem = function(){
    return self.get('allItems')[currentIndex - 1];
}

var currentItem = function(){
    return self.get('allItems')[currentIndex];
}

var nextItem = function(){
    return self.get('allItems')[currentIndex + 1];
});

return viewmodel;

The buttons and other info boxes are bound to previous,current and next Items. But this does not appear to work. I've had to make previous, current and nextItems copies of what lives in the allItems array and update those 3 objects at the same time. Not that big of a deal, but I just would like to, you know, not store copies of objects if I don't have to. I was hoping there might be a NotifyPropertyChanged("MyProperty") similiar to C#/Xaml that I missed while going through the API. This sort of functionality will be most useful to me for future tasks I have on my list due to some of the complexities of our calculated fields and the need to reducing memory consumption as devices get smaller.

Thanks for any help, ~David

Answer 1

Whenever a property of the view model changes, the change event is triggered.

To make this work in calculated fields, you need to access the relevant fields using ObservableObject.get(). See this section in the documentation.

Answer 2

2 possible problems.

1) How do you get items into allitems?

2) You should also .get("currentIndex") since that is the value that you update in changeCurrentItem

var currentItem = function(){
    return self.get('allItems')[self.get('currentIndex')];
}

That should cause viewModel to fire its change event for thecurrentItem calculated field whenever allItems or currentIndex changes.

If all else fails, you can manually fire the change event by doing:

viewmodel.trigger("change", { field: "currentItem" });
viewmodel.trigger("change", { field: "previousItem" });
viewmodel.trigger("change", { field: "nextItem" });

which would be similar to calling NotifyPropertyChanged("currentItem") in XAML.