ListView Issues

[bakerac4]

ListView/RadListView have quickly become THE major thorn in my side while testing Glimmer Native out. We need to use ListView/RadListView because they provide native view recycling. Without them, rendering a large list of items would kill the app on the phone or at the very least slow it down greatly.

The following issues need to be fixed before a 1.0 release can happen

• Tracked properties currently don't work inside a ListView Item. This is because list view items are rendered outside the main application - https://github.com/bakerac4/glimmer-native/blob/master/src/dom/native/RadListViewElement.ts#L34

• if helpers don't run on manual re-render. I think this has to do with list items being rendered outside of the main application as well.

• Other flavors of View Layer + Nativescript (vue, angular etc) allow for a template to be specified inline. For Example, in angular -

<RadListView [items]="dataItems">
    <ng-template tkListItemTemplate let-item="item">
        <StackLayout orientation="vertical">
            <Label class="nameLabel" [text]="item.name"></Label>
            <Label class="descriptionLabel" [text]="item.description"></Label>
        </StackLayout>
    </ng-template>
</RadListView>

Right now, Glimmer Native requires an actual component to be created so we can render it.

Along with specifying a template inline, I think it would be beneficial to give the user the option to user a real component. Currently this is how we do things, but there are downsides I haven't been able to solve.

• Currently need a wrapping template - which ties into Render Component needs wrapper #25
• Need ability to pass in actions and properties from the page doing the rendering to the ListViewItem component.

[lifeart]

regarding tracked properties won't work, maybe it may help https://gist.github.com/lifeart/d6237e0129e603b23d1aa8e8d4b07504 ?
way to make any object tracked

[lifeart]

is it possible to use yield for templating?
like

<RadListView @items={{dataItems}} @itemComponent="component-name" as  |ItemComponent|>
 <ItemComponent>
      <StackLayout orientation="vertical">
            <Label class="nameLabel" [text]="item.name"></Label>
            <Label class="descriptionLabel" [text]="item.description"></Label>
        </StackLayout>
</ItemComponent>
</RadListView>

and inside RadListView template, do

{{#each @items @key="id" as |item|}}
   {{yield (component @itemComponent) item}}
{{/each}}

[bakerac4]

@lifeart yielding isn't possible due to the fact that the list view is recycling items with views. So there is no each that gets called or rendered. What happens is that Nativescript calls for an item to be created and then https://github.com/bakerac4/glimmer-native/blob/master/src/dom/native/RadListViewElement.ts#L31 gets called.