8000 fix(ListView): allow ObservableArray items in ListView (Fixes #464) (… · nativescript-vue/nativescript-vue@a904c7b · GitHub
[go: up one dir, main page]
Skip to content

Commit a904c7b

Browse files
elie-grigor789
elie-g
authored and
rigor789
committed
fix(ListView): allow ObservableArray items in ListView (Fixes #464) (#498)
* fix(listview): fix ObservableArray items in ListView (#464) fix #464 * fix(samples): add sample for issue #464 ref #464
1 parent 6f8945e commit a904c7b

File tree

2 files changed

+41
-6
lines changed

2 files changed

+41
-6
lines changed

‎platform/nativescript/runtime/components/list-view.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { VUE_VIEW } from './v-template'
22
import { extend } from 'shared/util'
3+
import { ObservableArray } from 'tns-core-modules/data/observable-array'
34

45
export default {
56
props: {
67
items: {
7-
type: Array,
8+
type: Object,
9+
validator: val => Array.isArray(val) || val instanceof ObservableArray,
810
required: true
911
},
1012
'+alias': {
@@ -65,7 +67,7 @@ export default {
6567

6668
methods: {
6769
onItemTap(args) {
68-
this.$emit('itemTap', extend({ item: this.items[args.index] }, args))
70+
this.$emit('itemTap', extend({ item: this.getItem(args.index) }, args))
6971
},
7072
onItemLoading(args) {
7173
if (!this.$templates) {
@@ -75,10 +77,7 @@ export default {
7577
const index = args.index
7678
const items = args.object.items
7779

78-
const currentItem =
79-
typeof items.getItem === 'function'
80-
? items.getItem(index)
81-
: items[index]
80+
const currentItem = this.getItem(index)
8281

8382
const name = args.object._itemTemplateSelector(currentItem, index, items)
8483
const context = this.getItemContext(currentItem, index)
@@ -88,6 +87,11 @@ export default {
8887
},
8988
refresh() {
9089
this.$refs.listView.nativeView.refresh()
90+
},
91+
getItem(idx) {
92+
return typeof this.items.getItem === 'function'
93+
? this.items.getItem(idx)
94+
: this.items[idx]
9195
}
9296
}
9397
}

‎samples/app/464.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const Vue = require('./nativescript-vue')
2+
const {
3+
ObservableArray
4+
} = require('tns-core-modules/data/observable-array/observable-array')
5+
6+
Vue.config.debug = true
7+
Vue.config.silent = false
8+
9+
new Vue({
10+
data: {
11+
items: new ObservableArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
12+
},
13+
methods: {
14+
onItemTap({ item }) {
15+
this.items.push(`Item clicked: ${item} (shouldn't be \`undefined\`)`)
16+
}
17+
},
18+
template: `
19+
<Frame>
20+
<Page class="page">
21+
<ActionBar title="Home" class="action-bar" />
22+
<ScrollView>
23+
<ListView for="item in items" @itemTap="onItemTap">
24+
<v-template>
25+
<Label :text="item"/>
26+
</v-template>
27+
</ListView>
28+
</ScrollView>
29+
</Page>
30+
</Frame>`
31+
}).$start()

0 commit comments

Comments
 (0)
0