how to use multiple item templates of nativescript in pure javascript

121 Views Asked by At

I'm trying to implement multiple item templates for different data. my xml looks this

<lv:RadListView row="1" items="{{ list_data }}"
                itemTemplateSelector="{{ templateSelector }}">

                <lv:RadListView.itemTemplate>
                    <GridLayout rows="*,*" columns="*,auto" margin="15">
                        <Label row="0" col="0" text="{{ name }}"
                            textWrap="true" />
                        <Label row="1" col="0" text="{{ age }}"
                            textWrap="true" />
                        <Label rowSpan="2" col="1" text="{{ duration }}"
                            textWrap="true" />
                    </GridLayout>
                </lv:RadListView.itemTemplate>

                <lv:RadListView.itemTemplates>
                    <template key="break">
                        <GridLayout rows="*" columns="*,auto" margin="15"
                            backgroundColor="green">
                            <Label row="0" col="0" text="break"
                                textWrap="true" />
                            <Label rowSpan="2" col="1" text="{{ duration }}"
                                textWrap="true" />
                        </GridLayout>
                    </template>
                </lv:RadListView.itemTemplates>

            </lv:RadListView>

on viewmodel

 var count = 1;
  var viewModel = observableModule.fromObject({
    list_data: [{ template: "default", name: "crunches", age: "X 30", duration: "45 sec" },
    { template: "break" },
    { template: "default", name: "situp", age: "X 30", duration: "45 sec" },
    { template: "break" },
    { template: "default", name: "jumpingjack", age: "X 30", duration: "45 sec" },
    ],

    templateSelector: function name(args) {
      console.log(count++)
      return "break";
    },

here the templateSelector is getting called 20 times. I don't know how it was working. I need to change the template based on template in list_data.

this is the complete project link https://play.nativescript.org/?template=play-js&id=cPzCkf

0

There are 0 best solutions below