Template view mechanism for Nodejs Frame Express

The MVC pattern is unknown, it can enhance the efficiency of team collaboration, but also facilitate the maintenance and upgrading of products, this article we will express the framework of the template and view (V) related features. Template engine

Express supports many template engines and is commonly used for:

• The realization of Haml Haml
• Haml.js successor, but also Express's default template engine Jade
• Embed JavaScript templates Ejs
• Coffeescript-based template engine Coffeekup
• The Nodejs version of the jquery template engine

Views rendering (View randering)

The file name of the view is followed by the "<name>.<engine>" form, where <engine> is the name of the module to be loaded. For example, the view Layout.ejs is telling the view system to require (' Ejs '), the loaded module must output the Exports.compile (str, options) method, and return a function to comply with Express's template interface conventions. We can also use App.register () to map the template engine to other file extensions for more flexible template engine behavior so that "csser.html" can be rendered by the Ejs engine.

Below we will use the Jade engine to render the index.html, because we have not set Layout:false,index.jade rendered content will be passed into Layout.jade as the body local variable.

App.get ('/', function (req, res) {    res.render (' Index.jade ', {title: ' Csser, focus on web front-end technology!) ‘ });});

The new view engine setting allows you to specify the default template engine, which can be set if we want to use Jade:

App.set (' View engine ', ' Jade ');

So we can do it in the following way:

Res.render (' index ');

Instead of the following methods:

Res.render (' Index.jade ');

When "View Engine" is set up, the extension of the template is optional, and we can also mix and match the multi-template engine:

Res.render (' Another-page.ejs ');

Express also provides view option settings, which are applied after each view is rendered, such as when you don't use layouts often, so you can set it up:

App.set (' view options ', {  layout:false});

If required, these settings can be overridden in subsequent res.render () calls:

Res.render (' Csser-view.ejs ', {layout:true});

You can use your own layout instead of the system default by specifying a path, such as if we set "view engine" to jade and customized a layout called "./views/mylayout.jade". We can use it this way:

Res.render (' page ', {layout: ' Mylayout '});

Otherwise you must specify an extension:

Res.render (' page ', {layout: ' Mylayout.jade '});

These paths can also be absolute paths:

Res.render (' page ', {layout: __dirname + '/http://www.cnblogs.com/mylayout.jade '});

A good example of this is the custom Ejs template's start and close tags:

App.set (' view options ', {    open: ' {',    close: '}} ');

Detail view (view partials)

The Express view system natively supports local and collection views, which are called miniature views and are primarily used to render a document fragment. For example, rather than looping through comments in a view, use a local collection (partial collection):

Partial (' comment ', {collection:comments});

If no other options or local variables are needed, we can omit the object and simply pass in the comment array, which is the same as the example above:

Partial (' comment ', comments);

Some "magic" local variables are supported when using local collections:

• Firstincollection This value is true when the first object is a
• Indexincollection the index value of an object in the collection
• Lastincollection true when the last object is a
• Collectionlength Length of the collection

Local variables passed (or generated) take precedence, however locals passed to the parent view is available in the child View as well. Example if we were to render a blog post with partial (' blog/post ', post) it would generate the post local, but the View calling this function had the local user, it would is available to the Blog/post view as well.

The local variable passed in (or generated) takes precedence, but the local variable passed in to the parent view is still valid in the child view. So if we use partial (' blog/post ', post) to render the blog log, a local variable of post is generated, but the view that calls this function has a local user, and it still works in the Blog/post view. (One-time Note: This translation feeling has a problem, please expert pointing).

Performance tip: When using a local collection to render an array of 100 length means that you need to render 100 views, for a simple collection you can inline the loop instead of using a local collection, which can reduce overhead.

View Lookup

View lookups are relative to the parent view, such as we have a page view named "Views/user/list.jade", and if you call partial (' edit ') in the view, the view system will try to find and load the "views/user/ Edit.jade ", while partial ('../messages ') will load" Views/messages.jade ".

The view system also supports index templates so that you can use a directory with the same name. For example, in a route we execute Res.render (' users '), which will point to "Views/users.jade" or "Views/users/index.jade".

When using the indexed view above, we can refer to "Views/users/index.jade" from a directory with the same name through partial (' users '), while the view system will try ".. /users/index ", which can reduce the need for us to call partial (' index ').

Template view mechanism for Nodejs Frame Express