8000 feat: allow setting custom iterator, fixes #58 · rubythonode/nativescript-vue@7aba01c · GitHub
[go: up one dir, main page]
Skip to content

Commit 7aba01c

Browse files
rigor789rigor789
committed
feat: allow setting custom iterator, fixes nativescript-vue#58 
1 parent 424dcab commit 7aba01c

File tree

5 files changed

+40
-53
lines changed

5 files changed

+40
-53
lines changed

‎platform/nativescript/compiler/modules/list-view.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ function preTransformNode(el) {
1414

1515
addRawAttr(el, ':items', res.for)
1616
addRawAttr(el, '+alias', res.alias)
17+
18+
if (res.iterator1) {
19+
addRawAttr(el, '+index', res.iterator1)
20+
}
1721
}
1822

1923
export default {

‎platform/nativescript/compiler/modules/v-template.js

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
1-
import { addRawAttr } from 'compiler/helpers'
2-
31
function preTransformNode(el) {
4-
if (el.tag === 'v-template') {
5-
// set +alias property on the v-template component
6-
let alias = el.parent.attrsMap['+alias'] || 'item'
7-
addRawAttr(el, '+alias', alias)
8-
}
9-
102
if (el.parent && el.parent.tag === 'v-template') {
11-
// set the slot scope to the list-view +alias attribute
12-
el.slotScope = el.parent.parent.attrsMap['+alias'] || 'item'
3+
let alias = el.parent.parent.attrsMap['+alias'] || 'item'
4+
let index = el.parent.parent.attrsMap['+index'] || '$index'
5+
el.slotScope = buildScopeString(alias, index)
136
}
147
}
158

169
export default {
1710
preTransformNode
1811
}
12+
13+
export function buildScopeString(alias, index) {
14+
return `{ ${alias}, ${index}, $even, $odd }`
15+
}

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

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ export default {
99
},
1010
separatorColor: {
1111
type: String
12+
},
13+
'+alias': {
14+
type: String,
15+
default: 'item'
16+
},
17+
'+index': {
18+
type: String
1219
}
1320
},
1421

@@ -48,16 +55,16 @@ export default {
4855
},
4956

5057
mounted() {
58+
this.getItemContext = (item, index) =>
59+
getItemContext(item, index, this.$props['+alias'], this.$props['+index'])
60+
5161
this.$refs.listView.setAttribute('items', this.items)
5262
this.$refs.listView.setAttribute(
5363
'_itemTemplatesInternal',
5464
this.$templates.getKeyedTemplates()
5565
)
56-
this.$refs.listView.setAttribute('_itemTemplateSelector', (
57-
item,
58-
index /*,items*/
59-
) => {
60-
return this.$templates.selectorFn(new ItemContext(item, index))
66+
this.$refs.listView.setAttribute('_itemTemplateSelector', (item, index) => {
67+
return this.$templates.selectorFn(this.getItemContext(item, index))
6168
})
6269
},
6370

@@ -71,28 +78,20 @@ export default {
7178
? items.getItem(index)
7279
: items[index]
7380

74-
const context = new ItemContext(currentItem, index)
7581
const name = args.object._itemTemplateSelector(context, index, items)
82+
const context = this.getItemContext(currentItem, index)
83+
const oldVnode = args.view && args.view[VUE_VIEW]
7684

77-
let oldVnode = args.view && args.view[VUE_VIEW]
7885
args.view = this.$templates.patchTemplate(name, context, oldVnode)
7986
}
8087
}
8188
}
8289

83-
class ItemContext {
84-
constructor(item, index) {
85-
this.$index = index
86-
if (typeof item === 'object') {
87-
Object.assign(this, item)
88-
} else {
89-
this.value = item
90-
}
91-
this.even = index % 2 === 0
92-
this.odd = !this.even
93-
}
94-
95-
toString() {
96-
return this.value && this.value.toString()
90+
function getItemContext(item, index, alias, index_alias) {
91+
return {
92+
[alias]: item,
93+
[index_alias || '$index']: index,
94+
$even: index % 2 === 0,
95+
$odd: index % 2 !== 0
9796
}
9897
}

‎platform/nativescript/runtime/components/v-template.js

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,8 @@ export default {
1010
name: {
1111
type: String
1212
},
13-
1413
if: {
1514
type: String
16-
},
17-
18-
'+alias': {
19-
type: String,
20-
default: 'item'
2115
}
2216
},
2317

@@ -31,7 +25,6 @@ export default {
3125
this.$templates.registerTemplate(
3226
this.$props.name || (this.$props.if ? `v-template-${tid++}` : 'default'),
3327
this.$props.if,
34-
this.$props['+alias'],
3528
this.$scopedSlots.default
3629
)
3730
},
@@ -44,12 +37,10 @@ export class TemplateBag {
4437
this._templateMap = new Map()
4538
}
4639

47-
registerTemplate(name, condition, alias, scopedFn) {
40+
registerTemplate(name, condition, scopedFn) {
4841
this._templateMap.set(name, {
49-
condition,
50-
alias,
51-
conditionFn: this.getConditionFn(condition, alias),
5242
scopedFn,
43+
conditionFn: this.getConditionFn(condition),
5344
keyedTemplate: new VueKeyedTemplate(name, scopedFn)
5445
})
5546
}
@@ -69,19 +60,16 @@ export class TemplateBag {
6960
}
7061
}
7162

72-
getConditionFn(condition, alias) {
73-
return new Function(alias, `return !!(${condition})`)
63+
getConditionFn(condition) {
64+
return new Function('ctx', `with(ctx) { return !!(${condition}) }`)
7465
}
7566

7667
getKeyedTemplate(name) {
77-
const { keyedTemplate } = this._templateMap.get(name)
78-
return keyedTemplate
68+
return this._templateMap.get(name).keyedTemplate
7969
}
8070

8171
patchTemplate(name, context, oldVnode) {
82-
const { scopedFn } = this._templateMap.get(name)
83-
84-
const vnode = scopedFn(context)
72+
const vnode = this._templateMap.get(name).scopedFn(context)
8573
const nativeView = patch(oldVnode, vnode).nativeView
8674
nativeView[VUE_VIEW] = vnode
8775

@@ -113,7 +101,6 @@ export class VueKeyedTemplate /* implements KeyedTemplate */ {
113101
const vnode = this._scopedFn(deepProxy({}))
114102
const nativeView = patch(null, vnode).nativeView
115103
nativeView[VUE_VIEW] = vnode
116-
117104
return nativeView
118105
}
119106
}

‎samples/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@
66
"nativescript": {
77
"id": "org.nativescript.vuesample",
88
"tns-ios": {
9-
"version": "3.0.1"
9+
"version": "3.4.0"
1010
},
1111
"tns-android": {
12-
"version": "3.3.0"
12+
"version": "3.4.0"
1313
}
1414
},
1515
"dependencies": {
1616
"nativescript-gradient": "^2.0.0",
1717
"nativescript-pro-ui": "^3.2.0",
1818
"nativescript-theme-core": "~1.0.2",
19-
"tns-core-modules": "^3.0.0",
19+
"tns-core-modules": "^3.4.0",
2020
"vue-router": "^2.4.0",
2121
"vuex": "^3.0.0"
2222
},

0 commit comments

Comments
 (0)
0