repeat.for not working in ak-templates

[eliavmaman]

Hey I'm using Aurelia with Kendo grid (bridge). i have that datasource - ` this.datasource = { data: [

• {

            id: 1,
            cards: [
                {
                    value: 'A',
                    color: 'red',
                    suit: 'hearts'
                }
            ]
        }],
    schema: {
        model: {
            fields: {
                id: {type: 'number'},
                cards: [
                    {
                        value: {type: 'string'},
                        color: {type: 'string'},
                        suit: {type: 'string'}
                    }
                ]
            }
        }
    },
    pageSize: 15
  };`

  and the grid is like: ` <ak-grid k-data-source.bind="datasource" k-pageable.bind="pageable" k-sortable.bind="true" k-selectable.bind="true" k-navigatable.bind="true" k-reorderable.bind="true" k-scrollable.bind="{ virtual: true}">

                    <ak-col k-hidden="true" k-field="id"></ak-col>
                    <!--<ak-col k-field="cards" k-width="250px" k-template="${getCardsTemplate(model)}">-->
                    <ak-col k-field="cards" k-width="250px">
                        <ak-template>
                            <div class="card-holder" repeat.for="card of dataItem.cards" style="width: 12%; display: inline-block; padding: 0.5%;">
                                <div class="poker-card blah" poker-card data-value="card.value" data-color="card.color"
                                     data-suit="&card.suit;"
                                     style="width: 50px;height: 50px">
                                </div>
                            </div>
  
                        </ak-template>
                    </ak-col>`

i'm trying to access dataItem but its not available ,and the "cards" objects as well.

[JeroenVinke]

try

                            <div class="card-holder" repeat.for="card of cards" style="width: 12%; display: inline-block; padding: 0.5%;">
                                <div class="poker-card blah" poker-card data-value="card.value" data-color="card.color"
                                     data-suit="&card.suit;"
                                     style="width: 50px;height: 50px">
                                </div>
                            </div>

note that you don't need the dataItem. part.

[eliavmaman]

10 for the reply , but as i said "cards" filed object is not iteratable. when i display the card length (${cards.length}) i get the correct number. buy when iterate it , nothing happens.

[eliavmaman]

What i m actually asking is... Does the "@bindable field" in the kendo bridge, knows to tell if the property is an Array or just primitive. and that maybe the reason Aurelia repeat.for not recognise the cards array

[JeroenVinke]

I'm getting the following error:

Unhandled rejection Error: Value for 'PhoneNumbers' is non-repeatable
    at Repeat.itemsChanged (http://localhost:3000/jspm_packages/npm/aurelia-templating-resources@1.0.0-beta.1.2.0/repeat.js:153:15)
    at Repeat.bind (http://localhost:3000/jspm_packages/npm/aurelia-templating-resources@1.0.0-beta.1.2.0/repeat.js:125:12)
    at Controller.bind (http://localhost:3000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.2.0/aurelia-templating.js:2838:24)
    at View.bind (http://localhost:3000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.2.0/aurelia-templating.js:922:24)
    at TemplateCompiler.enhanceView (http://localhost:3000/src/aurelia-kendoui-bridge/common/template-compiler.js:119:16)
    at _loop (http://localhost:3000/src/aurelia-kendoui-bridge/common/template-compiler.js:94:22)
    at TemplateCompiler.compile (http://localhost:3000/src/aurelia-kendoui-bridge/common/template-compiler.js:99:13)
    at TemplateCompiler.handleTemplateEvents (http://localhost:3000/src/aurelia-kendoui-bridge/common/template-compiler.js:55:20)
    at kendo.ui.Widget.angular (http://localhost:3000/src/aurelia-kendoui-bridge/common/template-compiler.js:32:19)
    at X.extend._angularItems (http://localhost:3000/src/root/vendors/js/kendo.core.min.js:26:1151)
    at ue.ui.DataBoundWidget.extend._angularItems (http://localhost:3000/src/root/vendors/js/kendo.grid.min.js:28:16540)
    at .<anonymous> (http://localhost:3000/src/root/vendors/js/kendo.grid.min.js:28:15952)
    at P.extend._muteAngularRebind (http://localhost:3000/src/root/vendors/js/kendo.core.min.js:26:1009)
    at ue.ui.DataBoundWidget.extend.refresh (http://localhost:3000/src/root/vendors/js/kendo.grid.min.js:28:15920)
    at proxy (http://localhost:3000/jspm_packages/github/components/jquery@2.1.4/jquery.js:512:14)
    at r.extend.trigger (http://localhost:3000/src/root/vendors/js/kendo.core.min.js:25:6831)

With this code:

export class Advanced {
  datasource = {
    data: [{
      ContactName: 'jeroen',
      PhoneNumbers: ['12345678', '87654321']
    }, {
      ContactName: 'charles',
      PhoneNumbers: ['12345678', '87654321']
    }, {
      ContactName: 'nikolaj',
      PhoneNumbers: ['12345678', '87654321']
    }]
  }
}

<template>
  <ak-grid k-data-source.bind="datasource">
    <ak-col k-title="Phonenumbers">
      <ak-template>
        <ul>
          <li repeat.for="phoneNumber of PhoneNumbers">
            ${phoneNumber}
          </li>
        </ul>
      </ak-template>
    </ak-col>
  </ak-grid>
</template>

Aurelia can't find the repeaterstrategy for the array.

That's because Kendo wraps the array into an kendo.data.ObservableArray which is not of the Array type, and Aurelia does not have a repeaterstrategy for it.

I'm not sure but the following workarounds may work:

1. Create a value converter which puts the items in the kendo.data.ObservableArray into a new array and let aurelia iterate over that
2. add a repeater strategy locator here for kendo.data.ObservableArray to use the ArrayRepeatStrategy

[JeroenVinke]

Option 2 is probably the cleanest. Or we should contact Telerik about the possibility of disabling the MVVM capability entirely

[eliavmaman]

Ok solved it.

1. added object value converter: `export class ObjectValuesValueConverter { toView(obj) {

    let temp = [];

    if (obj) {
        obj.forEach(function (o) {
            temp.push({value: o.value, suit: o.suit, color: o.color});
        });
    }

    return temp;
}

}`

value converter retrieve the kendo.data.ObservableArray and then i iterate its values and return new array.

and the Aurelia Kendo grid column is looks like: `

```

                    </ak-col>`

[eliavmaman]

10x for the help @JeroenVinke

[JeroenVinke]

Awesome, I still think we should either disable the MVVM feature in its entirety (if possible) or create a repeatstrategylocator for kendo.data.ObservableArray, so lets keep this issue open for now

[JeroenVinke]

Pushed this to the repeater-strategy branch and not master as I'm not sure if this line works for all loaders. The syntax is a bit weird as the ArrayRepeatStrategy is not exported here

[JeroenVinke]

my pull request to aurelia/templating-resources to export repeat strategies has just been merged, so after we update the dependencies of the plugin we should be able to change these lines and release this feature

 import {KendoConfigBuilder} from './config-builder';
 import {RepeatStrategyLocator} from 'aurelia-templating-resources';
 import {ArrayRepeatStrategy} from 'aurelia-templating-resources/array-repeat-strategy';

to

 import {KendoConfigBuilder} from './config-builder';
 import {RepeatStrategyLocator, ArrayRepeatStrategy} from 'aurelia-templating-resources';