passing array to ObservableArray push

9 posts, 0 answers
  1. Maxim Konstantinovski
    Maxim Konstantinovski avatar
    63 posts
    Member since:
    Mar 2007

    Posted 25 Apr 2014 Link to this post

    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;
    };




  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 28 Apr 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Maxim Konstantinovski
    Maxim Konstantinovski avatar
    63 posts
    Member since:
    Mar 2007

    Posted 28 Apr 2014 Link to this post

    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
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 28 Apr 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Maxim Konstantinovski
    Maxim Konstantinovski avatar
    63 posts
    Member since:
    Mar 2007

    Posted 28 Apr 2014 Link to this post

    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
  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 28 Apr 2014 Link to this post

    Hello Maxim,

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

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Maxim Konstantinovski
    Maxim Konstantinovski avatar
    63 posts
    Member since:
    Mar 2007

    Posted 28 Apr 2014 Link to this post

    Hi Petyo,

    Kudos to you. That works well.

    Thank,
    Maxim
  9. Xavier
    Xavier avatar
    29 posts
    Member since:
    Jun 2014

    Posted 20 Aug 2014 Link to this post

    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.
  10. Maxim Konstantinovski
    Maxim Konstantinovski avatar
    63 posts
    Member since:
    Mar 2007

    Posted 20 Aug 2014 in reply to Xavier Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready