This repository was archived by the owner on Nov 12, 2024. It is now read-only.
This repository was archived by the owner on Nov 12, 2024. It is now read-only.
view增加assign方法 #54
Description
通过继承Magix.View来实现自己的View
通过Magix.View.extend方法来实现
import Magix from 'magix';
export default Magix.View.extend({
tmpl:'@demo.html',
render(){
console.log('render ui')
}
});view的关键方法和事件
显式的ctor、init、render方法
每个view默认都有一个ctor、init(初始化时调用，只会调用一次)和render(需要更新界面时被调用，可能会调用多次)
import Magix from 'magix';
export default Magix.View.extend({
tmpl:'@demo.html',
ctor(data){
console.log(data);
},
init(data){
console.log('init data',data);
},
render(){
console.log('render ui')
}
});ctor与init的区别：继承Magix.View后的View可以再被继承，在继承时，父类的init可以被子类覆盖，如果父类的init必须被调用时，就需要子类来确保在自己的init方法中显式调用父类的init方法。而ctor方法则没有这方面的问题，即使子类存在ctor方法且未显式调用父类的ctor，父类的ctor也会被调用
隐式的destroy,domready,dompatch等事件接口
为了便于插件及监控的开发，每个view会在适当的时候派发这些事件
import Magix from 'magix';
export default Magix.View.extend({
tmpl:'@demo.html',
init(data){
console.log('init data',data);
this.on('destroy',()=>{
console.log('view destroy');
});
this.on('dompatch',()=>{
console.log('before update ui');
});
this.on('domready',()=>{
console.log('ui ready');
});
},
render(){
console.log('render ui')
}
});view增加assign方法
magix3.8之后加入了dom比对。如果能从组件的角度通过数据来识别是否需要更新，则能大幅提升性能。基于这个原因，view增加了assign方法，开发者通过继承实现该方法，并在方法内部返回true或false控制是否需要调用render进行渲染
import Magix from 'magix';
export default Magix.View.extend({
tmpl: '@view.html',
assign(data) {
//你可以在这里对数据data进行加工,然后通过set方法放入到view中
this.set(data);
//返回true表示不管数据有没有变化都调用render方法更新当前view
//如果返回false则magix不再调用当前view的render方法
return true;
},
render() {
console.log('render');
this.digest();
}
});