yui2 datatable转换至yui3 (3)

 实际上到上文为止，我们已经得到一个可用的DataTable。用稍微调整过的两个例子：

dt_dynamicdata_clean.html

dt_formatting_source.html

均可得到正确结果。画面不再截图。

 

接下来当然是往前再迈进。开始吸收yui3的部分。即：将原有的datasource抛弃，吸纳yui3的datasource

作为数据处理层。

 

首先，要做这个事情的原因：

 

1.原有的yui2 datasource ，对json采用自行解析的方式，代码相当冗余。可控性差。

2.其次当然是connection 要转成io。【上篇文章已经这么做了】

3.最后一点，就是yui3的时代，能砍掉的yui2部分就砍（这个纯属个人乐趣）

 

仔细观察yui3 的datasource例子后，我们可以发现，实际上构造语句是相当接近的。

而datatable，我只用到datasource-io的部分。因此一些调用代码的对应转换如下：

 

旧：

/*myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList: "records", fields: [ {key:"id", parser:"number"}, {key:"name"}, {key:"date", parser:stringToDate}, {key:"price",parser:"number"}, {key:"number",parser:"number"} ], metaFields: { totalRecords: "totalRecords" // Access to value in the server response } };*/

新：

 

var myDataSource = new Y.DataSource.IO({source:"php/json_proxy.php?"});//new YAHOO.util.DataSource("php/json_proxy.php"); myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { schema: { metaFields:{ totalRecords: "totalRecords" }, resultListLocator: "records", resultFields: [{key:"id"},{key:"name"},{key:"date"},{key:"price"},{key:"number"}] } });

 

从上面的比较来看，调用代码是相当类似。接下来就是不一样的地方了。对Schema的处理。

 

Schema处理，YUI3DS（DataSource，下文就简称DS）采用了不一样的编写策略。利用了Plugin方式。

看了这个Y.Plugin.DataSourceJSONSchema的应用模式后，对 YUI3的Plugin 应用场景有了明确的概念。

这个概念相当于AOP（面向方面）。在方法发生前，拦截，处理，再让 事件响应代码来处理，先人一步，杀人于无形。

由于yui3中plug方法没有做检测（检查参数有效性），因此要小心如忘记use了对应的module，导致一个无效的参数传入，

系统又不报错，加上plugin的工作模式又是躲在后面偷偷干，所以容易困扰（我就遇到那么一桩）。

 

我们放大来看Y.Plugin.DataSourceJSONSchema的工作流程。

 

datasource-io，request 发出去了

datasource-io，response返回了，走到success 的callback方法。

datasource-io，fire一个data事件！

DataSourceJSONSchema登场，拦截data事件响应代码【先于：_defDataFn执行】，解析了response.responseText，把值mix到事件对象中。然后再传递下去。

datasource，：_defDataFn开始执行，获得的事件对象已经包含了已解析后的数据。

 

如果把上述流程的蓝色字体部分抽走，代码会照常走下去，当然结果也是错误的，适时的时候无法取到 期望中的数据。

 

总结一下。Plugin的适用场合，就是AOP。当需要对一个已成型的类，进行扩充性的数据处理时，或是在处理模式上有不同的分支时，可考虑采用Plugin来解决问题。 

 

到这一步为止，DS是替换完毕了。但新的问题也接着来了。

YUI2 ，DataTable代码中，onDataReturnSetRows，onDataReturnUpdateRows等方法采用的接口是旧的。只有旧的DS才会按照这样的参数列表进行调用。此时要动用代码修改了。

原接口格式：

function(sRequest, oResponse, oPayload)

现接口格式（修改为：）

function(e)

上面三个形参，加上代码内文中的this，均可在e.callback/e 中找到。我是这样修改onDataReturnSetRows方法的：

 

onDataReturnSetRows : function(e) { var dt = e.callback.scope ; if((dt instanceof DT) && dt._sId) { var oRequest = e.request; var oResponse = e.response; var oPayload = e.callback.argument ; dt.fireEvent("dataReturnEvent", {request:oRequest,response:oResponse,payload:oPayload}); // Pass data through abstract method for any transformations var ok = dt.doBeforeLoadData(oRequest, oResponse, oPayload), pag = dt.get('paginator'), index = 0; // Data ok to set if(ok && oResponse && !oResponse.error && lang.isArray(oResponse.results)) { // Update Records if (dt.get('dynamicData')) { if (oPayload && oPayload.pagination && lang.isNumber(oPayload.pagination.recordOffset)) { index = oPayload.pagination.recordOffset; } else if (pag) { index = pag.getStartIndex(); } dt._oRecordSet.reset(); // Bug 2290604: dyanmic data shouldn't keep accumulating by default } dt._oRecordSet.setRecords(oResponse.results, index | 0); // Update state dt._handleDataReturnPayload(oRequest, oResponse, oPayload); // Update UI dt.render(); } // Error else if(ok && oResponse.error) { dt.showTableMessage(dt.get("MSG_ERROR"), DT.CLASS_ERROR); } } else { } },

 

 

这样修改后。

 

dt_dynamicdata_clean.html又可以工作了。