What is the best practice for placing template views and backbone view code

Question

I am creating a ASP.Net MVC 3 application using Backbone.js. I am also using the jQuery templates for the views.

My question is how do I organize the files in an efficient way?

Currently I have a XXX.js file for the backbone application and inlined templates stored in the page that shows the backbone application, Index.cshtml. How can I move the templates into a different file that I can include like I include XXX.js?

App/
  Scripts/
    backbone.js
    underscore.js
    jquery-1.6.4.js
    jquery.tmpl.js
    myBackboneApplication.js
  Views/
    Home/
      Index.cshtml
  Controllers/
    HomeController.cs

I would like to move the templates out of Index.cshtml and into something related to myBackboneApplication.js. Something that I can include as a file inside Index.cshtml instead of inlined.

Answer 1

You might check out this related question. The two basic options are:

1. Create your templates as strings and include the Javascript file in your index file.

2. Create your templates as HTML in separate files, and insert them into the index file at build time, most likely within <script type="text/template"> tags.

In my current Backbone.js project, I'm using the second option - I keep all my templates in a separate folder, and I insert them into my index file during my ant build. Each template (e.g. my-view-template.html) is inserted into a <script> tag with id="my-view-template", and then I use jQuery to create the templates using $("#my-view-template").html() as the template string.