The seventh day of learning YUI.Ext--About View&JSONView_YUI.Ext

To display two-dimensional relationship data one by one, we can use the GIRD component. But in some situations, such as product displays and albums, we can use View components to display "matrix" data. The data source of View comes from DataModel object, which includes XMLDataModel and JSONDataModel. Although View supports JSON, if it is not used in a DataModel, the View subclass JSONView is more suitable because it provides more events and methods. Generally speaking, View is used for XML data sources; JSONView is used for JSON data sources.

How does View work?

Remember how to output a record before? Take an online store as an example; in the past, a product was output like this:

<%
		.....
		//下列服务端代码为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);
		.....
%>

Obviously, our ultimate goal is to output HTML and serve the browser rendering (Render). The working principle of View is the same, except that the things previously done by Sever are moved to Cilent, relying on View to handle them (essentially the template of Domhelper), and letting the browser finally render the output.

Need your help: Domhelper

As mentioned above, View cannot work without DomHelpr. DomHelpr provides "Template" here and compiles it. See the code below:

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

Loading data

The way VIEW loads data is different from that of JSONView: VIEW uses DataModel's load(), and JSONView uses UpateManager's load(). Let’s focus on the load() method of JSONView:

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

Only the url parameter is not optional, others such as nocache, text and scripts are optional. text and scripts are parameters associated with the UpdateManger instance

• params : String/Object
  (optional) The parameters to pass as either a url encoded string "param1=1&param2=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 usage tips

a. There is a gird and a JSONView. How do they call a data source at the same time?
1. Change the jsonData attribute; 2.Call refresh(); See http://www.yui-ext.com/forum/viewtopic.php?t=1968

b. Paging
There seems to be no good solution for paging yet. JACK only provides the following ideas:
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. How to get the entire DataModel instead of fields in JSONView? Every time I use alert(mainView.jsonData); the result is "undefined"
If you are getting the DataModel, you should use the View object. The reason for undefined is that load() is asynchronous, and you must wait for the data to be loaded first. Such as:

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

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

d. Study examples. The exampleImage Chooser itself is a good learning example

JSON Format

You might think that the service outputs JSON like this:

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

is correct. But no, it cannot be processed. The correct format should be:

{"user": <strong style="COLOR: red">[</strong>{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}<strong style="COLOR: red">]</strong>} 

Note that the array type is declared within the square brackets, and the View rendering method is actually consistent with the DataModel

Finally, provide a UML diagram of Veiw