views

@page Templates Templates @parent Tutorial 3

@body can.view loads and renders templates with the data you provide, and returns a documentFragment with the populated template. can.view supports many templating languages, but [EJS EJS] and [Mustache Mustache] allow you to live-bind Observes into templates.

Loading templates

You can load templates from a URL or directly from an existent script tag. To load from a script tag, pass can.view the tag's ID as the first parameter. To load from a URL, pass the URL as the first parameter. Use the second parameter to pass the data to populate the template with.

In order to register a template with can.view, create a script tag on the page with an ID, a type attribute that matches the templating language, and the content of the template inside: @codestart <script type="text/ejs" id="todoList"> <% can.each(this, function(val, key) { %> <li><%= val.description %></li> <% }); %> </script> @codeend

Then load the template using the script tag's ID and pass the template data: @codestart Todo.findAll({}, function(todos) { $('#nav').html(can.view('todoList', todos)) }); @codeend

Or you can load a template without registering it first (or including it on the page) by giving the URL to can.view: @codestart Todo.findAll({}, function(todos) { $('#nav').html(can.view('todos/todos.ejs', todos)) }); @codeend

Passing Deferreds

If the second parameter you pass to can.view contains Deferreds, can.view will instead return a Deferred that resolves to the documentFragment containing the populated template after all the deferreds have resolved.

This aspect is most useful because can.Model.findAll returns a Deferred, which means it's easy to lead a template, retrieve one or more Models, and render the resulting documentFragment when everything has been loaded:

@codestart can.view('todos.ejs', { todos: Todo.findAll(). user: User.findOne({id: 5}) }).then(function(fragment) { document.getElementById('todos').appendChild(fragment); }); @codeend

Rendering to string

To render to a string instead of a documentFragment, use can.view.render. This is mainly used to include templates inside of other templates:

@codestart <% can.each(todos, function(todo, key) { %> <li><%== can.view.render('todos.ejs', todo); %></li> <% }) %> @codeend