Spry 框架的简单使用小结 越简单,越麻烦 有时候: 罗晴明 2011-01-04
Spry = Surprise? <ul><li>优点: </li></ul><ul><li>1、 模板式 框架。使用类似jsp tag/velocity的方式隐藏了操作数据的细节。某些情况下适合快速开发的傻瓜式框架。 </li></ul><u...
傻瓜例子 <ul><li><!-- 展示用户信息 --> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://active.163.com/js...
以及,傻瓜问题 <ul><li>1、tag解析期间如何隐藏原始字符串? </li></ul><ul><li>a.在需要直接输出文本的地方。 </li></ul><ul><li>使用无文本值无样式的内联span元素: </li></ul><ul>...
以及,傻瓜问题 <ul><li>b.input一类需要在属性中赋值的地方。 </li></ul><ul><li><div spry:region=&quot;data&quot;>  </li></ul><ul><li><input  spry...
以及,傻瓜问题 <ul><li>2、如何实现简单的条件逻辑? </li></ul><ul><li>a.使用spry:if或者spry:test(仅用于spry:repeat) </li></ul><ul><li><div spry:region...
以及,傻瓜问题 <ul><li>b.使用spry:choose和spry:when </li></ul><ul><li><div  spry:choose=&quot;spry:choose&quot; > </li></ul><ul><li>...
以及,傻瓜问题 <ul><li>c. 数据项较多的 select 一类怎么办 ?...... </li></ul><ul><li>在 spry 框架下 ... 这个真不知道怎么办 … </li></ul><ul><li>果断抛弃 spry 框架...
以及,傻瓜问题 <ul><li>追本溯源,我们应该能在数据回调接口中直接获取原始 json 。 </li></ul><ul><li>function getSelfInfoService(clubId){ </li></ul><ul><li>t...
以及,傻瓜问题 <ul><li>function getActJsonData(url,spryData, callback ){ </li></ul><ul><li>jQuery.ajax({ </li></ul><ul><li>url:ur...
最后,疑难杂症 <ul><li>本次工单中,有这样一个需求: </li></ul><ul><li>先以 ajax 方式读取城市列表,然后 ajax 获取个人信息,选择对应的城市。 </li></ul><ul><li>使用前文的 callback...
最后,疑难杂症 <ul><li>经过简单的排查,发现在 spry 解析标签之后, select 的 inner HTML 被清空。 </li></ul><ul><li>(由于时间紧迫,没有深层次的去探寻原因。) </li></ul><ul><l...
最后,疑难杂症 <ul><li>尝试将 select 拿出 spry:region 势力范围,代码修改为: </li></ul><ul><li><form> </li></ul><ul><ul><li><div  spry:region=&qu...
前端开发组 罗晴明 2011-01-02 祝大家新年快乐!
Upcoming SlideShare
Loading in …5
×

Spry框架的简单使用小结

997 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
997
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Spry框架的简单使用小结

  1. 1. Spry 框架的简单使用小结 越简单,越麻烦 有时候: 罗晴明 2011-01-04
  2. 2. Spry = Surprise? <ul><li>优点: </li></ul><ul><li>1、 模板式 框架。使用类似jsp tag/velocity的方式隐藏了操作数据的细节。某些情况下适合快速开发的傻瓜式框架。 </li></ul><ul><li>2、暂未发现。 </li></ul>
  3. 3. 傻瓜例子 <ul><li><!-- 展示用户信息 --> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://active.163.com/js/SpryData.js&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://active.163.com/js/SpryJSONDataSet.js&quot;></script> </li></ul><ul><li><div spry:region=&quot;data&quot; > </li></ul><ul><li>姓名 : {memberInfo.name} <br/> </li></ul><ul><li>性别 : {memberInfo.sex} <br/> </li></ul><ul><li>手机 : {memberInfo.phone} <br/> </li></ul><ul><li></div> </li></ul>
  4. 4. 以及,傻瓜问题 <ul><li>1、tag解析期间如何隐藏原始字符串? </li></ul><ul><li>a.在需要直接输出文本的地方。 </li></ul><ul><li>使用无文本值无样式的内联span元素: </li></ul><ul><li><span spry:content=&quot;{xxx}&quot;></span> </li></ul><ul><li>则在 Spry 解析 tag 的期间,不会出现奇怪的 {xxx} 。 </li></ul><ul><li>解析完毕后,自动将 {xxx} 写入到 span 的 innerHTML 中。 </li></ul>
  5. 5. 以及,傻瓜问题 <ul><li>b.input一类需要在属性中赋值的地方。 </li></ul><ul><li><div spry:region=&quot;data&quot;> </li></ul><ul><li><input spry:state=&quot;loading&quot; value=&quot; 正在载入数据 ...&quot; /> </li></ul><ul><li><input spry:state=&quot;error&quot; value=&quot; 数据载入出错 ...&quot; /> </li></ul><ul><li><input spry:state=&quot;ready&quot; value=&quot;{firstname} &quot; /> </li></ul><ul><li></div> </li></ul>
  6. 6. 以及,傻瓜问题 <ul><li>2、如何实现简单的条件逻辑? </li></ul><ul><li>a.使用spry:if或者spry:test(仅用于spry:repeat) </li></ul><ul><li><div spry:region=&quot;dsPhotos&quot;> </li></ul><ul><li><ul spry:repeat=&quot;spry:repeat&quot; > </li></ul><ul><li><li spry:if=&quot;'{@path}'.search(/^s/) != -1;&quot; >{@path}</li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul>
  7. 7. 以及,傻瓜问题 <ul><li>b.使用spry:choose和spry:when </li></ul><ul><li><div spry:choose=&quot;spry:choose&quot; > </li></ul><ul><li><div spry:default=&quot;spry:default&quot; > </li></ul><ul><li><input type=&quot;radio&quot; checked=true name=&quot;sex&quot; value=&quot; 男 /> </li></ul><ul><li><input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot; 女 &quot; id=&quot;female&quot;/> </li></ul><ul><li></div> </li></ul><ul><li><div spry:when=&quot;'{memberInfo.sex}' == ' 女 '&quot; > </li></ul><ul><li><input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot; 男 &quot; /> </li></ul><ul><li><input type=&quot;radio&quot; checked=true name=&quot;sex&quot; value=&quot; 女 &quot; /> </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>
  8. 8. 以及,傻瓜问题 <ul><li>c. 数据项较多的 select 一类怎么办 ?...... </li></ul><ul><li>在 spry 框架下 ... 这个真不知道怎么办 … </li></ul><ul><li>果断抛弃 spry 框架,将已填充的数据还原为 jsonstring ,然后 eval 为可操作的对象 : </li></ul><ul><li>var jsonStr = data.geDocument(); </li></ul><ul><li>var myObj = eval(‘(’+jsonStr+’)’); </li></ul><ul><li>// 遍历 select 的 options ,使匹配元素的 selected=true </li></ul><ul><li>但是, data 何时可用?… </li></ul>
  9. 9. 以及,傻瓜问题 <ul><li>追本溯源,我们应该能在数据回调接口中直接获取原始 json 。 </li></ul><ul><li>function getSelfInfoService(clubId){ </li></ul><ul><li>this.clubId = clubId; </li></ul><ul><li>this.callback = function(data){}; </li></ul><ul><li>this.data = new Spry.Data.JSONDataSet(); </li></ul><ul><li>this.userInfoUrl = 'http://active.163.com/front/front-club-member!self'; </li></ul><ul><li>this.setClubId = function (clubId){this.clubId = clubId;} </li></ul><ul><li>this.updateData = function(){ </li></ul><ul><li>getActJsonData(this.userInfoUrl+“?clubId=”+this.clubId,this.data, this.callback ); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  10. 10. 以及,傻瓜问题 <ul><li>function getActJsonData(url,spryData, callback ){ </li></ul><ul><li>jQuery.ajax({ </li></ul><ul><li>url:url+&quot;&jsoncallback=?&quot;, </li></ul><ul><li>dataType:&quot;jsonp&quot;, </li></ul><ul><li>success:function(data){ </li></ul><ul><li>callback(data); </li></ul><ul><li>spryData.loadDataIntoDataSet(data); </li></ul><ul><li>Spry.Data.updateAllRegions(); </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>然后,可对 callback 方法进行覆盖。 </li></ul>
  11. 11. 最后,疑难杂症 <ul><li>本次工单中,有这样一个需求: </li></ul><ul><li>先以 ajax 方式读取城市列表,然后 ajax 获取个人信息,选择对应的城市。 </li></ul><ul><li>使用前文的 callback 方案,在 Firefox 下一切正常。但在 IE6 下列表为空。 </li></ul>
  12. 12. 最后,疑难杂症 <ul><li>经过简单的排查,发现在 spry 解析标签之后, select 的 inner HTML 被清空。 </li></ul><ul><li>(由于时间紧迫,没有深层次的去探寻原因。) </li></ul><ul><li>于是,得出这样一个简单但有效的 workaround 。原先的代码如下: </li></ul><ul><li><div spry:region=&quot;data&quot; > </li></ul><ul><ul><li><form> </li></ul></ul><ul><ul><ul><li><input … /> </li></ul></ul></ul><ul><ul><ul><li><input … /> </li></ul></ul></ul><ul><ul><ul><li><select … /> </li></ul></ul></ul><ul><ul><ul><li><input … /> </li></ul></ul></ul><ul><ul><li></form> </li></ul></ul><ul><li></div> </li></ul>
  13. 13. 最后,疑难杂症 <ul><li>尝试将 select 拿出 spry:region 势力范围,代码修改为: </li></ul><ul><li><form> </li></ul><ul><ul><li><div spry:region=&quot;data&quot; > </li></ul></ul><ul><ul><ul><li><input … /> </li></ul></ul></ul><ul><ul><ul><li><input … /> </li></ul></ul></ul><ul><ul><li></div> </li></ul></ul><ul><ul><li><select … /> </li></ul></ul><ul><ul><li><div spry:region=&quot;data&quot; > </li></ul></ul><ul><ul><ul><li><input … /> </li></ul></ul></ul><ul><ul><li></div> </li></ul></ul><ul><li></form> </li></ul><ul><li>至此,完美解决。 </li></ul>
  14. 14. 前端开发组 罗晴明 2011-01-02 祝大家新年快乐!

×