Table of Contents
JSON Format
Home Web Front-end JS Tutorial The seventh day of learning YUI.Ext--About View&JSONView_YUI.Ext

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

May 16, 2016 pm 07:17 PM

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);
		.....
%>
Copy after login

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'
   });


Copy after login

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> }); 
Copy after login

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); 
});
Copy after login

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"}} 
Copy after login

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>} 
Copy after login

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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Replace String Characters in JavaScript Replace String Characters in JavaScript Mar 11, 2025 am 12:07 AM

Replace String Characters in JavaScript

Custom Google Search API Setup Tutorial Custom Google Search API Setup Tutorial Mar 04, 2025 am 01:06 AM

Custom Google Search API Setup Tutorial

Example Colors JSON File Example Colors JSON File Mar 03, 2025 am 12:35 AM

Example Colors JSON File

8 Stunning jQuery Page Layout Plugins 8 Stunning jQuery Page Layout Plugins Mar 06, 2025 am 12:48 AM

8 Stunning jQuery Page Layout Plugins

10 jQuery Syntax Highlighters 10 jQuery Syntax Highlighters Mar 02, 2025 am 12:32 AM

10 jQuery Syntax Highlighters

Build Your Own AJAX Web Applications Build Your Own AJAX Web Applications Mar 09, 2025 am 12:11 AM

Build Your Own AJAX Web Applications

What is 'this' in JavaScript? What is 'this' in JavaScript? Mar 04, 2025 am 01:15 AM

What is 'this' in JavaScript?

10  JavaScript & jQuery MVC Tutorials 10 JavaScript & jQuery MVC Tutorials Mar 02, 2025 am 01:16 AM

10 JavaScript & jQuery MVC Tutorials

See all articles