passing array to ObservableArray push

[Maxim]

Hi,

Passing array as an argument to ObservableArray push does not work as expected. Would it not make sense to check if arguments contains a single array and use it as a parameter to  push.apply(this, items). Here is a sample.

var kendo = window.kendo,
    CHANGE = "change",
    isArray = $.isArray,
    push = [].push,
    stringify = JSON.stringify;

kendo.data.ObservableArray.prototype.push = function () {
    var index = this.length;
    var items = arguments;

    // if no args passed return length
    if (items.length === 0)
    { return index; }

    if (items.length === 1 && isArray(items[0])) {
        items = items[0];
    }

    items = this.wrapAll(items);
    var result = push.apply(this, items);

    this.trigger(CHANGE, {
        action: "add",
        index: index,
        items: items
    });

    return result;
};

[Petyo]

Hi Maxim,

The behavior you observe is by design - the built-in push array method will not splatter the passed array into different items; this would make pushing arrays objects impossible.

Regards,
Petyo
Telerik

 

 

[Maxim]

Hi Petyo,

I see your point. However that means that there is no way to add or replace item(s) in bulk in ObservableArray since there is no set or add method. For example I want to load ObservableArray when ajax call returns.
PS: Yes I know I can work directly with view model and use set but that feels clunky at best.
Thanks,
Max

[Petyo]

Hi Maxim,

You can use the push.apply approach on the observable array:

var vm = kendo.observable({
  data: new kendo.data.ObservableArray([])
});

vm.data.push.apply(vm.data, [ 1, 2, 3]);
console.log(vm.get("data"));

Regards,
Petyo
Telerik

 

 

[Maxim]

Hi Petyo,

Yes I can use that but doing so will trigger a change event for every item in source array... Probably will cause re rendering when bound to a widget each time an item is added. There should be a way to add multiple items in bulk mode triggering only one change event upon completion.

Thanks,
Maxim

[Petyo]

Hello Maxim,

No, it won't - please check this jsbin. The change event is triggered once. 

Regards,
Petyo
Telerik

 

 

[Maxim]

Hi Petyo,

Kudos to you. That works well.

Thank,
Maxim

[Xavier]

Where can I find the documentation for vm.data.push.apply ?
Why is vm.data used twice in vm.data.push.apply(vm.data, [ 1, 2, 3]); ?

Is there a command to empty the array?

Thanks.

[Maxim]

This is built in JS function that enables you to call any function using specific args and this  context. 
See this:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply