diff --git a/apps/app/ui-tests-app/list-view/dynamic-templates.ts b/apps/app/ui-tests-app/list-view/dynamic-templates.ts new file mode 100644 index 000000000..06e973c1d --- /dev/null +++ b/apps/app/ui-tests-app/list-view/dynamic-templates.ts @@ -0,0 +1,21 @@ +import { Page } from "tns-core-modules/ui/page"; +import { ViewModel } from "./main-view-model"; + +export function pageLoaded(args) { + let page = args.object; + const viewModel = new ViewModel(); + + page.bindingContext = { + "items": viewModel.items + } +} + +exports.onItemTap = function (args) { + const list = args.object; + let index = args.index; + let listArray = list.page.bindingContext["items"]; + let currentItem = listArray.getItem(index); + + currentItem.age = currentItem.age + 1; + listArray.setItem(index, currentItem); +} \ No newline at end of file diff --git a/apps/app/ui-tests-app/list-view/dynamic-templates.xml b/apps/app/ui-tests-app/list-view/dynamic-templates.xml new file mode 100644 index 000000000..bca89ebe9 --- /dev/null +++ b/apps/app/ui-tests-app/list-view/dynamic-templates.xml @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/apps/app/ui-tests-app/list-view/main-page.ts b/apps/app/ui-tests-app/list-view/main-page.ts index 2265aec8d..4b7b3e59f 100644 --- a/apps/app/ui-tests-app/list-view/main-page.ts +++ b/apps/app/ui-tests-app/list-view/main-page.ts @@ -13,6 +13,7 @@ export function loadExamples() { const examples = new Map(); examples.set("list-view-templates", "list-view/list-view"); examples.set("images-template", "list-view/images-template"); + examples.set("dynamic-templates", "list-view/dynamic-templates"); examples.set("bindings", "list-view/listview-binding"); examples.set("listview-bg-separator-color", "list-view/listview-bg-separator-color"); examples.set("csslv", "list-view/csslv"); diff --git a/apps/app/ui-tests-app/list-view/main-view-model.ts b/apps/app/ui-tests-app/list-view/main-view-model.ts index 18e6d6866..9ae9bcf14 100644 --- a/apps/app/ui-tests-app/list-view/main-view-model.ts +++ b/apps/app/ui-tests-app/list-view/main-view-model.ts @@ -4,11 +4,13 @@ import { ObservableArray } from "tns-core-modules/data/observable-array"; export class Item extends Observable { private _name: string; private _id: number; + private _age: number; - constructor(name: string, id: number) { + constructor(name: string, id: number, age: number) { super(); this._name = name; this._id = id; + this._age = age; } get name(): string { @@ -33,6 +35,17 @@ export class Item extends Observable { } } + get age(): number { + return this._age; + } + + set age(value: number) { + if (this._age !== value) { + this._age = value; + this.notifyPropertyChange("age", value) + } + } + public toString() { return `${this.name} ${this.id}`; } @@ -44,7 +57,7 @@ export class ViewModel extends Observable { get items(): ObservableArray { this._items = new ObservableArray(); for (let i = 0; i < 100; i++) { - this._items.push(new Item(`Item`, i)); + this._items.push(new Item(`Item`, i, 0)); } return this._items; } diff --git a/tns-core-modules/ui/list-view/list-view-common.ts b/tns-core-modules/ui/list-view/list-view-common.ts index 9744e0ef4..5b0cf65c3 100644 --- a/tns-core-modules/ui/list-view/list-view-common.ts +++ b/tns-core-modules/ui/list-view/list-view-common.ts @@ -66,6 +66,11 @@ export abstract class ListViewBase extends ContainerView implements ListViewDefi }); this._itemTemplateSelector = (item: any, index: number, items: any) => { item["$index"] = index; + + if (this._itemTemplateSelectorBindable.bindingContext === item) { + this._itemTemplateSelectorBindable.bindingContext = null; + } + this._itemTemplateSelectorBindable.bindingContext = item; return this._itemTemplateSelectorBindable.get("templateKey"); };