概念理解及常用方法

获得动态组件/节点对象

on开头事件(如:onClick):event.source.$domNode

Bind-事件(如:bind-click):event.currentTarget

Tip:事件中,console.log(event)->查看更多event详情

获取当前操作数据的行数据(当前行)

event.bindingContext.$object

案例

1 Model.prototype.toProByCateClick = function(event){
2     var categoryData=this.comp('categoryData');
3     var row=event.bindingContext.$object;
4     console.log(row.val('id'));
5 };

Tip:获取当前行也可以使用数据组件方法getCurrentRow();不过,该方法需要聚焦点击(点击两次:一次聚焦,一次获取)才能获得准确的当前行

获取JQuery对象

使用xid属性:$(this.getElementByXid('xid'))

通过X5组件:this.comp('xid').$domNode

创建节点:justep.Bind.addNode($parentNode,div)

删除节点:justep.Bind.removeNode(node)

Tip:

this.comp():获取WeX5封装的组件对象

this.getElementByXid():获取dom对象

派发事件

情景:shell跳转的页面中,在当前页调用其他页面的js方法。常用在main.w来

定义派发事件

Model.prototype.modelLoad = function(event){
        //事件监听器,可在其他页面中调用定义事件
        justep.Shell.on('onHomeContent',this.onHomeContent,this);
        justep.Shell.on('onUserContent',this.onUserContent,this);
}
//事件定义
Model.prototype.onHomeContent=function(){
      this.comp('contents2').to('homeContent');
};
Model.prototype.onUserContent=function(){                                    
    this.comp('userContainer').getInnerModel().updateUserData();   this.comp('contents2').to('userContent'); }; Model.prototype.modelUnLoad = function(event){  //解除事件监听 justep.Shell.off('onHomeContent',this.onHomeContent,this); justep.Shell.off('onUserContent',this.onUserContent,this); };

Tip:

this.comp('userContainer').getInnerModel().updateUserData()调用子页面的方法来刷新子页面数据

也可以使用

this.getInnerModel().comp("子页面的data的xid").refreshData()在main的onActive等事件中调用子页面的数据组件刷新数据

调用派发事件

Model.prototype.backBtnClick = function(event){
        this.close();
        justep.Shell.fireEvent('onHomeContent');
};

对象监听

属性值:

This.item=justep.Bind.observable(value);
This.item.set(value);
This.item.get( );

数组:

This.items=justep.Bind.observableArray([one,two,...]);
This.items.push();
This.items.remove();

Tip:

input实时同步需要添加自定义属性bind-textInput:mybind(mybind为自定义监听对象)

原文地址:https://www.cnblogs.com/skye-blog/p/8365504.html