1

If I add below code in my index.html then it's working fine but I want to define in external file and then I want to load it with can.view.

<script type="text/mustache" id="todosList">
     {{#todos}}
          <li>{{description}}</li>
     {{/todos}}
</script>

If I create separate html file how do I load a template from it?

ramblinjan
  • 6,578
  • 3
  • 30
  • 38
Jay Shukla
  • 5,794
  • 8
  • 33
  • 63

2 Answers2

1

can.view can directly load templates from a URL. From the can.view documentation:

Loading templates from a url

To load from a url, simply pass the location of the template to can.view. The location of the template needs an extension that matches the type of template:

document.getElementById('recipes')   
      .appendChild(can.view('templates/recipes.ejs', recipeData ) )

Note: If you are using RequireJS, the URL will be relative to its baseUrl.

In your case, if you named your file todos.mustache and it was in the templates directory, it would look like this:

document.getElementById('todos')   
      .appendChild(can.view('todos.mustache', recipeData ) )
ramblinjan
  • 6,578
  • 3
  • 30
  • 38
0
$('target-element').html(can.view('todosList', todolist-data))

This is the syntax to load external template in canJS.

Raja Sekar
  • 2,062
  • 16
  • 23
  • I know this. It's working fine when I define above declaration of template inside index.html but I want separate file for todosList template and then want load using can.view... – Jay Shukla Sep 22 '14 at 11:06
  • 1
    You should just be able to reference the external file instead of the script tag id: `$('target-element').html(can.view('path/to/todosList.mustache', todolist-data))` – Daff Sep 22 '14 at 19:18