KendoUI : Confused about when bindings actually 'fire'

Question

Using Kendo UI's MVVM framework, I am getting confused about how bindings that are wired in javascript actually work. Given a view model, I have tried the following;

var viewModel = new kendo.observable({
   Items: [],
  onUpdateItems: function(e){
     console.log('updating items');
 }
});
viewModel.Items.bind('change', function(e){
  viewModel.onUpdateItems(e);
});

viewModel.trigger("change", { field: "Items" });

This does not cause the function to trigger. Though if I actually change items in the view, like interacting with it, it causes the function to fire. This doesn't make a lot of sense to me.

Answer 1

You're binding the change event for viewModel.Items, so you need to trigger the event there. If you change your call to

viewModel.Items.trigger("change");

it will call viewModel.onUpdateItems().

Change events will bubble upwards (from an inner ObservableArray to the outer ViewModel, for example), but not the other way. So if you trigger the change event for the view model, it will not fire the event for the nested ObservableArray Items.