widget - Documentation

Source:

core/widget.js, line 4

这是Page的基类，所有Page的默认事件和流程都是在这里被定义
所有Page类通过xjs.declare申明，并将widget作为parents参数传入，用以继承默认事件流程。
最后使用xjs.createView实例化Page类

所有基类的函数都可以被重写（除了init）,重写后的事件可以调用this.super()方法执行父类被覆盖的函数
widget的流程行顺序按照以下:
init—>render—>request—>syncGetData—>buildRender—>startup—>onExit

Members

(static) baseClass :string

Source:

core/widget.js, line 124

Page类的CSS Class Name

Type:

string

(static) id :string

Source:

core/widget.js, line 51

实例化后的Page类id，此id是唯一的，可以用于xjs.byId获取到This对象

Type:

string

(static) templateString :string

Source:

core/widget.js, line 132

传入模板字符串，基于underscore的模板引擎渲染HTML

Type:

string

(static) title :string

Source:

core/widget.js, line 43

定义Page的标题

Type:

string

Methods

(static) buildRender()

Source:

core/widget.js, line 112

See:

{widget#request}

模板渲染流程，将会把this对象作为数据采集对象传入模板。并扫描模板里的自定义锚点后映射到this对象上
[data-xjs-element] 将挂载到this对象上，并通过$ + name 用以区分普通dom对象和jquery对象

Example

<div data-xjs-element="divNode"></div>
//this.divNode 获取原始dom对象
//this.$divNode 获取jquery对象

(static) init(dom)

Source:

core/widget.js, line 15

Page类的初始化函数，同时控制渲染事件的执行流程，此方法不可以被重写。

Parameters:

Name	Type	Description
`dom`		根Dom节点，用于插入模板

(static) onExit()

Source:

core/widget.js, line 144

Page的退出事件，在路由切换被触发时调用，如果有添加事件监听需要自行注销，应该写在这个事件里，如果你复写了这个函数，别忘了在function末尾调用this._super()

(static) request()

Source:

core/widget.js, line 61

request函数用于设置需要预先请求的数据队列，所有队列请求成功后才会执行后面的流程。对zepto的ajax模块进行了二次封装，所有参数和$.ajax一致。ajax返回的数据将会根据app的名字挂载到this.data下

Example

request: function() {
    return {
        app: 'name', //在request之后的函数中可以用this.data.name获取到数据
        url: 'example.do',
        data: {}
    }
}
//或者
request: function() {
    return [{
        app: 'app1', //在request之后的函数中可以用this.data.app1获取到数据
        url: 'example.do',
        data: {}
    }, {
        app: 'app2',
        url: 'test.do'
    }]
}

(static) startup()

Source:

core/widget.js, line 33

当模板和数据都被渲染后就会调用startup事件，Page里的Dom节点操作以及业务逻辑都应该在这里实现。