As I mentioned in one of my In Progress posts, I've been playing around with templating in JS and the different approaches taken by Microsoft and others. Well, I finally finished my first sample project for my site. It's a rough draft, so be gentle. In the near future, I plan on consolidating the code into a prototype and refactoring it in the process. Let me begin with my my idea and how it developed.
When I started playing around with Microsoft's client templates, I started with the dataview and wanted to tweak it a bit to load templates on the fly. When you have a full fledged AJAX application, you generally find yourself wanting to pull a lot of data dynamically and it'd be nice to do that with a framework, as opposed to making separate pages for different content if you're just updating a widget. I'm going to circle back to the Microsoft code in the near future, but I started looking for a lightweight alternative I could use to test my idea. Enter John Resig's Micro-Templating Example. The first modification to his his code was to use <# #> instead of <% %> to maintain compatibility with existing ASP.NET markup. After that I worked on loading a script element with a type of "text/html" from an external URL. This has the added benefit of full intellisense for markup in your external template file (which you lose with inline text/html script tags since Visual Studio doesn't know how to interpret the element). Loading templates from an external file also allows you to cache existing templates, which can be a performance boost if you end up adding a lot of templates or don't have a CDN of your own.
I've implemented this approach in my admin panel for this blog. Drafts, activation, editing, etc. are all handled using this system. It works surprisingly well considering that it's a prototype, and allows me to further seperate code from the UI. I will continue to update this example project and post on changes in the codebase and any optimizations I make.
You can download the project here.