Javascript MVC -- View

 

Original article: http://javascriptmvc.com/docs.html#&who=jQuery.View

Liu guixue, liuguixue@gmail.com)

 

 

 

With jquery, view uses templates to provide a unified interface. With the registered template engine, you can:

• Use jquery extension in view, after, append, before, HTML, prepend, replace, replacewith, text .;
• Template, loading HTML elements and external files;
• Synchronous and asynchronous template Loading;
• Template cache;
• Compile and process the template during product compilation;
• Directly call the jquery Plugin in the template

Use

When using view, you often need to add the template filling result to the webpage. jquery. View overwrites the jquery modifier, so using view can be very simple, as shown below:

$ ("# Foo" ).html ('mytemplate. ejs', {message: 'Hello world '})

The above code:

• Load the template 'mytemplate. ejs'. The template content is as follows:

 

<H2> <% = message %> </H2> 

 

• Use {message: 'Hello world'} to fill in the template. The result is as follows:

 

<Div id = 'foo'> "<H2> Hello World </H2> </div> 

 

• Grant the result to the foo element. The Foo element is as follows:

 

<Div id = 'foo'> <H2> Hello World </H2> </div> 

 

Jquery Modifier

You can use the following jquery modifier in the template:

After	$ ('# Bar'). After ('temp. jaml ',{});
Append	$ ('# Bar'). append ('temp. jaml ',{});
Before	$ ('# Bar'). Before ('temp. jaml ',{});
Html	('Your bar').html ('temp. jaml ',{});
Prepend	$ ('# Bar'). prepend ('temp. jaml ',{});
Replace	$ ('# Bar'). Replace ('temp. jaml ',{});
Replacewith	$ ('# Bar'). replacewidth ('temp. jaml ',{});
Text	$ ('# Bar'). Text ('temp. jaml ',{});

These jquery modifiers generally require you to pass a string and an object to the template.

Template location

View can load templates from SCRIPT tags or files.

 

Load from script

You can use the following method to create a template script Tag:

<MCE: Script Type = 'text/ejs' id = 'rees es'> <! -- <Br/> <% for (VAR I = 0; I <recipes. length; I ++) {%> <br/> <li> <% = recipes [I]. name %> </LI> <br/> <% }%> <br/> // --> </MCE: SCRIPT> 

Fill in this template as follows:

$ ("# Foo" ).html ('rees es', recipedata) 

Note: we pass in the element ID to be filled.

 

Load from File

 

You can pass the template path as follows:

$ ("# Foo" ).html ('templates/recipes. ejs', recipedata) 

However, we often need the relative path of the template (Uniform Relative to the root path). You can use // to obtain the root path of jmvc:

$ ("# Foo" example .html ('// APP/views/recipes. ejs', recipedata) 

Finally, [jquery. Controller. Prototype. View
Controller/View] plug-in makes path search easier:

$ ("# Foo" example .html (this. View ('referes', recipedata )) 

Template Packaging

If you use many templates, you want to organize them as files for reuse between pages or applications.

However, the cost of this method is relatively high. If the browser checks each template separately, these additional HTTP requests will slow your application.

Fortunately, steal. Views can compile the template to your product file. You only need to specify the View File as follows:

Steal. Views ('path/to/The/view. ejs ');

Asynchronous

By default, requests are synchronized (waiting. It doesn't matter, because stealjs will package the view template to your Js for download.

However, some people do not use stealjs, or just want to load the template when necessary. If you have these requirements, you can provide a callback function as a parameter, as shown below:

$ ("# Foo" example .html ('rees es', recipedata, function (result) {<br/> This. fadein () <br/> }); 

The callback function is called together with the filled template result and passed to the original jquery object through 'eas.

Template Filling

Sometimes, you only need to obtain the filled template and do not assign it to other elements. You can use $. View:

VaR out = $. View ('path/to/template. jaml ',{}); 

Template pre-loading

You can asynchronously pre-load the template as follows:

$. View ('path/to/template. jaml ', {}, function (){}); 

Supported template Engines

Javascriptmvc supports the following template languages:

• Embeddedjs

 

<H2> <% = message %> </H2> 

• Jaml

H2 (data. Message ); 

• Micro

<H2 >{% = message %} </H2> 

• Jquery. tmpl

<H2 >$ {message} </H2> 

The popular mustache engine will be added in the second stage.

Use other template Engines

Basic templates you like to $. View and steal are very simple. For more information, see jquery. View. Register.

 

Constructor

Template search, processing, caching, data filling, and other auxiliary functions. Using stealjs, you can combine the template with the view during product compilation to synchronize the template, there is no problem with using view, as shown below:

 

$. View ("// myplugin/views/init. ejs", {message: "Hello World "}) 

 

If you do not have stealjs, it is best to use view asynchronously, as shown below:

 

$. View ("// myplugin/views/init. ejs ", <br/> {message:" Hello World "}, function (result) {<br/> // do something with result <br/> }) <br/> new $. view (view, Data, helpers, callback)-> string 

 

• View {string}

URL or ID of the template source file

• Data {object}

The data passed to the view.

• Helpers {optional: Object}

Auxiliary Functions (optional) may be used in views. Not all templates support this function.

• Callback {optional: Object}

Callback Function (Optional). If yes, this template is loaded asynchronously. If you have not compressed the template to your view, we recommend that you use it.

• Returns {string}

View filling result.