Skip to content

Commit cd90e64

Browse files
yyx990803yyx990803
committed
simplify v-repeat syntax
1 parent 93b0325 commit cd90e64

File tree

11 files changed

+47
-50
lines changed

11 files changed

+47
-50
lines changed

‎examples/todomvc/index.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,28 +27,28 @@ <h1>todos</h1>
2727
<ul id="todo-list">
2828
<li
2929
class="todo"
30-
v-repeat="todo:todos"
31-
v-if="todoFilter(todo.completed)"
30+
v-repeat="todos"
31+
v-if="todoFilter(completed)"
3232
v-class="
33-
completed : todo.completed,
34-
editing : todo == editedTodo
33+
completed : completed,
34+
editing : this == editedTodo
3535
"
3636
>
3737
<div class="view">
3838
<input
3939
class="toggle"
4040
type="checkbox"
41-
v-model="todo.completed"
41+
v-model="completed"
4242
v-on="change:toggleTodo"
4343
>
44-
<label v-text="todo.title" v-on="dblclick:editTodo"></label>
44+
<label v-text="title" v-on="dblclick:editTodo"></label>
4545
<button class="destroy" v-on="click:removeTodo"></button>
4646
</div>
4747
<input
4848
class="edit"
4949
type="text"
50-
v-model="todo.title"
51-
v-todo-focus="todo == editedTodo"
50+
v-model="title"
51+
v-todo-focus="this == editedTodo"
5252
v-on="
5353
blur : doneEdit,
5454
keyup : doneEdit | key enter,

‎examples/todomvc/js/app.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
Vue.config({debug:true})
2+
13
var filters = {
24
all: function () { return true },
35
active: function (completed) { return !completed },
@@ -43,32 +45,32 @@ var app = new Vue({
4345
},
4446

4547
removeTodo: function (e) {
46-
this.todos.remove(e.item)
47-
this.remaining -= e.item.completed ? 0 : 1
48+
this.todos.remove(e.targetVM.$scope)
49+
this.remaining -= e.targetVM.completed ? 0 : 1
4850
todoStorage.save()
4951
},
5052

5153
toggleTodo: function (e) {
52-
this.remaining += e.item.completed ? -1 : 1
54+
this.remaining += e.targetVM.completed ? -1 : 1
5355
todoStorage.save()
5456
},
5557

5658
editTodo: function (e) {
57-
this.beforeEditCache = e.item.title
58-
this.editedTodo = e.item
59+
this.beforeEditCache = e.targetVM.title
60+
this.editedTodo = e.targetVM
5961
},
6062

6163
doneEdit: function (e) {
6264
if (!this.editedTodo) return
6365
this.editedTodo = null
64-
e.item.title = e.item.title.trim()
65-
if (!e.item.title) this.removeTodo(e)
66+
e.targetVM.title = e.targetVM.title.trim()
67+
if (!e.targetVM.title) this.removeTodo(e)
6668
todoStorage.save()
6769
},
6870

6971
cancelEdit: function (e) {
7072
this.editedTodo = null
71-
e.item.title = this.beforeEditCache
73+
e.targetVM.title = this.beforeEditCache
7274
},
7375

7476
removeCompleted: function () {

‎src/compiler.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,8 @@ function Compiler (vm, options) {
9595
// for repeated items, create an index binding
9696
// which should be inenumerable but configurable
9797
if (compiler.repeat) {
98-
scope.$index = compiler.repeatIndex
98+
//scope.$index = compiler.repeatIndex
99+
def(scope, '$index', compiler.repeatIndex, false, true)
99100
compiler.createBinding('$index')
100101
}
101102

@@ -463,10 +464,13 @@ CompilerProto.define = function (key, binding) {
463464
compiler.markComputed(binding)
464465
}
465466

466-
if (!(key in scope)) {
467+
// $index is inenumerable
468+
if (!(key in scope) && key !== '$index') {
467469
scope[key] = undefined
468470
}
469471

472+
// if the scope object is already observed, that means
473+
// this binding is created late. we need to observe it now.
470474
if (scope.__observer__) {
471475
Observer.convert(scope, key)
472476
}

‎src/directives/on.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,7 @@ module.exports = {
5050
var target = delegateCheck(e.target, delegator, identifier)
5151
if (target) {
5252
e.el = target
53-
e.vm = target.vue_viewmodel
54-
e.item = e.vm.$scope[compiler.repeatPrefix]
53+
e.targetVM = target.vue_viewmodel
5554
handler.call(ownerVM, e)
5655
}
5756
}
@@ -64,10 +63,7 @@ module.exports = {
6463
var vm = this.vm
6564
this.handler = function (e) {
6665
e.el = e.currentTarget
67-
e.vm = vm
68-
if (compiler.repeat) {
69-
e.item = vm.$scope[compiler.repeatPrefix]
70-
}
66+
e.targetVM = vm
7167
handler.call(ownerVM, e)
7268
}
7369
this.el.addEventListener(event, this.handler)

‎src/directives/repeat.js

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,7 @@ var mutationHandlers = {
5151
},
5252

5353
sort: function () {
54-
var key = this.arg,
55-
vms = this.vms,
54+
var vms = this.vms,
5655
col = this.collection,
5756
l = col.length,
5857
sorted = new Array(l),
@@ -61,7 +60,7 @@ var mutationHandlers = {
6160
data = col[i]
6261
for (j = 0; j < l; j++) {
6362
vm = vms[j]
64-
if (vm.$scope[key] === data) {
63+
if (vm.$scope === data) {
6564
sorted[i] = vm
6665
break
6766
}
@@ -153,7 +152,6 @@ module.exports = {
153152

154153
var node = this.el.cloneNode(true),
155154
ctn = this.container,
156-
scope = {},
157155
ref, item
158156

159157
// append node into DOM first
@@ -171,16 +169,13 @@ module.exports = {
171169
}, this.compiler)
172170
}
173171

174-
// set data on scope and compile
175-
scope[this.arg] = data || {}
176172
item = new this.ChildVM({
177173
el: node,
178-
scope: scope,
174+
scope: data,
179175
compilerOptions: {
180176
repeat: true,
181177
repeatIndex: index,
182178
repeatCollection: this.collection,
183-
repeatPrefix: this.arg,
184179
parentCompiler: this.compiler,
185180
delegator: ctn
186181
}

‎test/functional/fixtures/nested-repeat.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<body>
99
<div id="test">
1010
<ul>
11-
<li v-repeat="item : items" v-class="'list-' + $index">
11+
<li v-repeat="items" v-class="'list-' + $index">
1212
<ul>
13-
<li v-repeat="subitem : item.items" v-class="'list-' + $index">
14-
{{$parent.$index + '.' + $index + ' : ' + item.title + '&lt;-' + subitem.title}}
13+
<li v-repeat="items" v-class="'list-' + $index">
14+
{{$parent.$index + '.' + $index + ' : ' + $parent.title + '&lt;-' + title}}
1515
</li>
1616
</ul>
1717
</li>

‎test/functional/fixtures/nested-viewmodels.html renamed to ‎test/functional/fixtures/nested-vms.html

File renamed without changes.

‎test/functional/fixtures/repeated-items.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
</p>
2121
<p>Total items: <span class="count" v-text="items.length"></span></p>
2222
<ul>
23-
<li class="item" v-repeat="item:items">
24-
{{$index}} {{item.title}}
23+
<li class="item" v-repeat="items">
24+
{{$index}} {{title}}
2525
</li>
2626
</ul>
2727
</div>

‎test/functional/fixtures/repeated-vms.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@
66
<script src="../../../dist/vue.js"></script>
77
</head>
88
<body>
9-
<div class="item" v-repeat="item:items" v-component="item" v-on="click:click">
10-
{{msg + ' ' + item.title}}
9+
<div class="item" v-repeat="items" v-component="item" v-on="click:click">
10+
{{msg + ' ' + title}}
1111
</div>
1212
<script>
1313
Vue.config({ debug: true })
1414

1515
Vue.component('item', {
1616
ready: function () {
17-
this.item.title += ' init'
17+
this.title += ' init'
1818
},
1919
proto: {
2020
click: function () {
21-
this.item.title += ' click'
21+
this.title += ' click'
2222
}
2323
},
2424
scope: {

‎test/functional/fixtures/transition.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,19 +43,19 @@
4343
</div>
4444
<div
4545
class="test"
46-
v-repeat="item:items"
47-
v-if="filter(item)"
46+
v-repeat="items"
47+
v-if="filter(this)"
4848
v-transition
49-
v-attr="data-id:item.a">
50-
{{item.a}}
49+
v-attr="data-id:a">
50+
{{a}}
5151
</div>
5252
<div
5353
class="test"
54-
v-repeat="item:items"
55-
v-show="filter(item)"
54+
v-repeat="items"
55+
v-show="filter(this)"
5656
v-transition
57-
v-attr="data-id:item.a">
58-
{{item.a}}
57+
v-attr="data-id:a">
58+
{{a}}
5959
</div>
6060
</div>
6161
<h1 style="margin:0">123</h1>

0 commit comments

Comments
 (0)