Learn about YUI. Ext on the seventh day-about ViewJSONView

We can use the GIRD component to display the data of a two-dimensional relationship. However, in some cases, such as product display and album, we can use the View component to display "matrix" data. The View Data Source comes from the DataModel object, that is, XMLDataModel and JSONDataModel. Although View supports JSON, if it is not used for DataModel, the View subclass JSONView is more suitable because it provides more events and methods. In general, View is used for XML data sources; JSONView is used for JSON data sources.

How does View work?

Remember how to output a record? Take online stores as an example. In the past, a product was output as follows:

<% ..... // The following server code is ASP using JScript (still JS, I'm a big JS Fan ^) var str = ""; str + = "<td> <div id = 'title'>"; str + = rs ("title") + "<\/div> "; str + = "

Obviously, our ultimate goal is to output HTML and serve the browser rendering (Render. The View works the same way, but it only moves the previous things that Sever did to the Cilent and relies on the View for processing (essentially the Domhelper template), so that the browser can finally render the output.

Domhelper

As mentioned above, the work of View is inseparable from DomHelpr. DomHelpr provides "Template" here and compiles it. See the following code:

// Create a Template object var tpl = new YAHOO. ext. Template (
'<Div class = "entry">' +
'<A class = "entry-title" href = "{link}" >{title} </a>' +
'<H4> {date} by {author} | {comments} Comments '</Div> ); Tpl. compile (); // compile () method, which can bring DOM performance gain var moreView = new YAHOO. ext. jsonView ('entry-list', tpl, {jsonRoot: 'posts'}); // or implicitly create a Template object var view = new YAHOO. ext. view ('My-element', '<div id = "{0}"> {2}-{1} </div>', // auto create template dataModel, {singleSelect: true, selectedClass: 'dataview-selected '});

Load data

Views load data in different ways than JSONView: Views use DataModel load (), and JSONView uses UpateManager load (). The load () method of JSONView is described as follows:

View. load ({url: 'Your-url. php ',
Params: {param1: 'foo', param2: 'bar'}, // It can be a URL encoded character
Callback: yourFunction,
Scope: yourObject, // (optional scope)
DiscardUrl: false,
Nocache: false,
Text: 'loading... ', // Loading text
Timeout: 30, // timeout
Scripts: false
});

Only url parameters cannot be set by default. Other parameters 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

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

B. Paging
There is no good solution for paging. 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 does JSONView obtain the entire DataModel instead of the field? Every time I use alert (mainView. jsonData), the result is "undefined"
If you are obtaining DataModel, you should use the View object. The reason for undefined is that load () is asynchronous, and you must wait for the data to load first. For example:

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

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

D. Learning example. Image Chooser is a good learning example.

JSON Format

You may think that the service outputs such JSON:

{"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": [{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}]} 

Note that the array type is declared in square brackets. The View rendering method is actually consistent with DataModel.

Finally, a Veiw UML diagram is provided.