5

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.

Jason
  • 3,736
  • 5
  • 33
  • 40

1 Answers1

4

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.

Community
  • 1
  • 1
nrabinowitz
  • 55,314
  • 10
  • 149
  • 165
  • Ugh! I guess I need to get me some asset pipeline kung-fu! – Jason Sep 28 '11 at 20:19
  • i've also been doing this (#2) recently. it works well, and gives a lot of flexibility – Derick Bailey Sep 28 '11 at 20:20
  • 4
    I use require.js to pull in html template files as text assets--these get combined along with all the js into one file. so my server serves up very small index files...just the bootloaded model and one script tag. – timDunham Sep 29 '11 at 04:15