Ale.js

Method

1.0.0更新内容:

1.0.0 版本及以后,在 methods 参数里的任何函数里使用 this 可以代指渲染之后的 ale组件对象。


同时,在 1.0.0 版本及以后,你也可以在组件渲染时动态设置或覆盖 methods 属性。

开始

让我们接着组件 生命周期 的教程来讲解,还是定时器的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Ale("timer", {
template: function(){
return "<span>Now Time: </span>" + this.data.time
},
data: {
time: new Date().toLocaleTimeString()
},
life: {
mounting: function(){
/* 这里需要使用箭头函数,因为不会绑定 this */
this.timer = setInterval(() => {
this.data.time = new Date().toLocaleTimeString();
}, 1000);
},
unmounting: function(){
clearInterval(this.timer);
}
}
})

Ale.render("timer", {
el: "#app"
})

</p

不知道你有没有注意到,我们的定时器直接添加在 this 上:

1
2
3
4
/* 注意这里,直接绑定到 Ale组件对象上(this) */
this.timer = setInterval(() => {
this.data.time = new Date().toLocaleTimeString();
}, 1000);

可是,如果我们不小心,添加的函数与 Ale组件对象 里的内置函数重名了,那么将会有一些未知 BUG 出现。

这时,我们推荐你将函数添加到 Ale组件对象 里的内置属性 methods 上!

让我们修改一下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Ale("timer", {
template: function(){
return "<span>Now Time: </span>" + this.data.time
},
data: {
time: new Date().toLocaleTimeString()
},
life: {
mounting: function(){
/* 注意这里,绑定methods上 */
this.methods.timer = setInterval(() => {
this.data.time = new Date().toLocaleTimeString();
}, 1000);
},
unmounting: function(){
clearInterval(this.methods.timer);
}
}
})

实例是可以正常执行的。

同时,你也可以在组件定义时设置 methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Ale("test", {
template: "test",
methods: {
/* 定义一个名为 testFn 的函数 */
testFn: function(){
alert("test!")
}
},
life: {
mounting: function(){
/* 动态调用它 */
this.methods.testFn();
}
}
})

高级

data 属性一样,methods 属性也会自动绑定到组件的全部元素及子元素上,通过 this.methods 即可访问:

1
template: "<span onclick='this.methods.testFn()'>Click me!</span>"

找到了一些错误?在Github上编辑!