how to use multiple item templates of nativescript in pure javascript - nativescript

Question

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