Commit 86629dc
tests: add tests for changing ListView item template with expression
1 parent 5e70d03 commit 86629dc
4 files changed
Lines changed: 52 additions & 3 deletions
File tree
- apps/app/ui-tests-app/list-view
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,21 @@ | |||
| 1 | + import { Page } from "tns-core-modules/ui/page"; | ||
| 2 | + import { ViewModel } from "./main-view-model"; | ||
| 3 | + | ||
| 4 | + export function pageLoaded(args) { | ||
| 5 | + let page = <Page>args.object; | ||
| 6 | + const viewModel = new ViewModel(); | ||
| 7 | + | ||
| 8 | + page.bindingContext = { | ||
| 9 | + "items": viewModel.items | ||
| 10 | + } | ||
| 11 | + } | ||
| 12 | + | ||
| 13 | + exports.onItemTap = function (args) { | ||
| 14 | + const list = args.object; | ||
| 15 | + let index = args.index; | ||
| 16 | + let listArray = list.page.bindingContext["items"]; | ||
| 17 | + let currentItem = listArray.getItem(index); | ||
| 18 | + | ||
| 19 | + currentItem.age = currentItem.age + 1; | ||
| 20 | + listArray.setItem(index, currentItem); | ||
| 21 | + } | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,14 @@ | |||
| 1 | + <Page loaded="pageLoaded"> | ||
| 2 | + <GridLayout id="grid-layout"> | ||
| 3 | + <ListView id="lv1" items="{{ items }}" itemTemplateSelector="age % 2 === 0 ? 'green':'red'" itemTap="onItemTap"> | ||
| 4 | + <ListView.itemTemplates> | ||
| 5 | + <template key="red"> | ||
| 6 | + <Label text="{{ name + ' ' + id }}" style.backgroundColor="red"/> | ||
| 7 | + </template> | ||
| 8 | + <template key="green"> | ||
| 9 | + <Label text="{{ name + ' ' + id }}" style.backgroundColor="green"/> | ||
| 10 | + </template> | ||
| 11 | + </ListView.itemTemplates> | ||
| 12 | + </ListView> | ||
| 13 | + </GridLayout> | ||
| 14 | + </Page> | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -13,6 +13,7 @@ export function loadExamples() { | |||
| 13 | 13 | const examples = new Map<string, string>(); | |
| 14 | 14 | examples.set("list-view-templates", "list-view/list-view"); | |
| 15 | 15 | examples.set("images-template", "list-view/images-template"); | |
| 16 | + examples.set("dynamic-templates", "list-view/dynamic-templates"); | ||
| 16 | 17 | examples.set("bindings", "list-view/listview-binding"); | |
| 17 | 18 | examples.set("listview-bg-separator-color", "list-view/listview-bg-separator-color"); | |
| 18 | 19 | examples.set("csslv", "list-view/csslv"); | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -4,11 +4,13 @@ import { ObservableArray } from "tns-core-modules/data/observable-array"; | |||
| 4 | 4 | export class Item extends Observable { | |
| 5 | 5 | private _name: string; | |
| 6 | 6 | private _id: number; | |
| 7 | + private _age: number; | ||
| 7 | 8 | ||
| 8 | - constructor(name: string, id: number) { | ||
| 9 | + constructor(name: string, id: number, age: number) { | ||
| 9 | 10 | super(); | |
| 10 | 11 | this._name = name; | |
| 11 | 12 | this._id = id; | |
| 13 | + this._age = age; | ||
| 12 | 14 | } | |
| 13 | 15 | ||
| 14 | 16 | get name(): string { | |
@@ -33,6 +35,17 @@ export class Item extends Observable { | |||
| 33 | 35 | } | |
| 34 | 36 | } | |
| 35 | 37 | ||
| 38 | + get age(): number { | ||
| 39 | + return this._age; | ||
| 40 | + } | ||
| 41 | + | ||
| 42 | + set age(value: number) { | ||
| 43 | + if (this._age !== value) { | ||
| 44 | + this._age = value; | ||
| 45 | + this.notifyPropertyChange("age", value) | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | + | ||
| 36 | 49 | public toString() { | |
| 37 | 50 | return `${this.name} ${this.id}`; | |
| 38 | 51 | } | |
@@ -43,8 +56,8 @@ export class ViewModel extends Observable { | |||
| 43 | 56 | ||
| 44 | 57 | get items(): ObservableArray<Item> { | |
| 45 | 58 | this._items = new ObservableArray<Item>(); | |
| 46 | - for (let i = 0; i < 100; i++) { | ||
| 47 | - this._items.push(new Item(`Item`, i)); | ||
| 59 | + for (let i = 0; i < 3; i++) { | ||
| 60 | + this._items.push(new Item(`Item`, i, 0)); | ||
| 48 | 61 | } | |
| 49 | 62 | return this._items; | |
| 50 | 63 | } | |
0 commit comments