学习YUI.Ext 第七天--关于View&JSONView


Posted in Javascript onMarch 10, 2007

展现一条一条的二维关系的数据,我们可以使用GIRD组件。 但有些场合,如产品展示,画册,我们可以使用View组件,来展示“矩阵”式的数据。 View的数据源来自DataModel对象,即包含XMLDataModel和JSONDataModel。尽管View支持JSON,但如果不是用于DataModel,View的子类JSONView更适用,因为它提供更多的事件和方法。一般来说,View用于XML数据源;JSONView用于JSON数据源。

View如何工作?

记得以前如何输出一个记录吗?以网上商店为例子;以前是这样输出一个商品的:

<%
		.....
		//下列服务端代码为ASP using JScript(依然是JS,I'm a big JS Fan^^)
		var str ="";
		str+="<td><div id='title'>";
		str+=rs("title")+"<\/div>";
		str+="<img src="+rs("thumb_image")+">";
		str+="<\/td>"
		Resposne.Write(str);
		.....
%>

很明显,我们最终目的还是要输出HTML,为浏览器渲染(Render)服务。View工作原理也一样,只不过把以前Sever做的事情搬到Cilent来,依靠View来处理(实质上是Domhelper的模版),让浏览器最终渲染输出。

需要你的帮忙:Domhelper

如上述,View的工作离不开DomHelpr。DomHelpr在这里提供"模版Template",并将其编译。见下面代码:

//新建一个Template对象
var tpl = new YAHOO.ext.Template(
 '<div class="entry">' + 
  '<a class="entry-title" href="{link}">{title}</a>' +
  '<h4>{date} by {author} | {comments} Comments</h4>{description}' +
 '</div><hr />'
);
tpl.compile(); //compile()的方法,可带来DOM性能的增益
var moreView = new YAHOO.ext.JsonView('entry-list', tpl, {
 jsonRoot: 'posts'
});
//又或者隐式创建Template对象
var view = new YAHOO.ext.View('my-element', 
   '<div id="{0}">{2} - {1}</div>', // auto create template
   dataModel, { 
    singleSelect: true, 
    selectedClass: 'ydataview-selected'
   });

 

加载数据

VIEW加载数据的方式与JSONView的有所不同:VIEW采用DataModel的load(),JSONView采用UpateManager的load()。下面重点说说JSONView的load()方法:

view.load({ url: 'your-url.php',
 params: {param1: 'foo', param2: 'bar'}, // 可以是URL encoded字符
 callback: yourFunction,
 scope: yourObject, //(optional scope) 
 discardUrl: false, 
 nocache: false,
 text: 'Loading...',//loading之提示文字
 timeout: 30,//超时
 scripts: false
 });

只有url参数是不可缺省的,其它如 nocache, text and scripts都是可选的。 text和scripts是与UpdateManger实例关联的参数

  • params : String/Object
    (optional) The parameters to pass as either a url encoded string "param1=1¶m2=2" or an object {param1: 1, param2: 2}
  • callback : Function
    (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
  • discardUrl : Boolean
    (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.

JSONView使用点滴

a.有一个gird和JSONView,两者如何同时调用一个数据源?
1.改变jsonData属性; 2.Call refresh(); 见http://www.yui-ext.com/forum/viewtopic.php?t=1968

b.分页
分页视乎还没有什么好的方案,JACK只提供下面的思路:
JsonView extends View. View supports using a JSONDataModel. It won't render a paging toolbar for you, but it will loadPage() and standard DataModel functionality. The view will automatically update when you load new data. If you want named template parameters (like JsonView), you will need to remap the indexes (DataModel style) to named parameters. See the YAHOO.ext.View docs for more info on that.
http://www.yui-ext.com/forum/viewtopic.php?t=2340

c.如何JSONView的获取整个DataModel而不是字段?我每次用alert(mainView.jsonData); 结果是“undefined”
如果是获取DataModel,那应该用View对象。出现undefined的原因是load()是异步的,你必须先等待数据load完。如:

mainView.el.getUpdateManager().on('update', function(){ 
  alert(mainView.jsonData); 
});

详见http://www.yui-ext.com/forum/viewtopic.php?t=1209

 

d.学习例子。范例Image Chooser本身就是一个好的学习例子

JSON Format

您可能认为服务输出这样的JSON:

{"user": {"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}}

是正确无误的。但不对,它是不能被处理的。正确的格式应该是:

{"user": [{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}]}

注意方括号内声明的是数组类型,View渲染方式实际是与DataModel一致的

最后,提供一幅Veiw的UML图

学习YUI.Ext 第七天--关于View&amp;JSONView
Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 #Javascript
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 #Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 #Javascript
学习YUI.Ext 第三天
Mar 10 #Javascript
学习YUI.Ext 第二天
Mar 10 #Javascript
学习YUI.Ext基础第一天
Mar 10 #Javascript
JavaScript触发器详解
Mar 10 #Javascript
You might like
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
运动会稿件100字
2014/02/21 职场文书
交通安全寄语大全
2014/04/08 职场文书
入党自传范文2015
2015/06/26 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
CSS基础详解
2021/10/16 HTML / CSS
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技