Node server side handling of Handlebar templates

 

In my prior post introducing the bones of our YUI based level editor, I showed the following way of loading in a template from the server:

initializer:function(){ var that=this, request = Y.io('/scripts/views/templates/person.Template',{ on:{ complete:function(id,response){ var template = Y.Handlebars.compile(response.responseText); that.get('container').setHTML(template(that.get('model').getAttrs(['name','age','height']))); } } }); }

 

This works, but it is less than ideal.  There are alternatives, but each has a downside.  You can compile the template into a JavaScript string, but then, what is the point of creating a template in the first place?  The nice thing about a template is, it is basically just HTML with a small bit of specialized markup in it.  You can send that template to a designer, who can then make modifications to your UI without knowing anything but basic HTML.  Of course, nothing is preventing you from going through the compilation step with the finished result, but this will be a massive time sink on your productivity. 

 

Probably the best answer, is to compile the templates on the server.  I didn’t go this route because frankly, it made for a really lousy tutorial.  It would basically take the same amount of code for JUST loading dynamic templates, as it would take for all the rest of the project combined!  This IMHO added a needless level of complexity to the tutorial and would only confuse people.  However, loading from the server is *IS* a better way to do it, and I was considering making an additional post for people interested in doing it that way.

 

Nicely, I don’t have to, someone else has done it for me! Smile

 

In this thread (about this thread… a real Conception moment here)  on the YUI forums, user Satyam has taken the ball and run with it!  So if you are interested in how you would implement templating on the server side, be sure to check it out.  The nice part about implementing it server side is, you still get your markup nicely separated from the rest of your code, however, you eliminate the asynchronous call to fetch the template from the server.  Thanks Satyam.

 

This, is the modifications he made to server.js to support loading of templates server side, while this is the modification he made to the view.  It is certainly more complex, but it is also a much cleaner implementation.

Programming YUI HTML


Scroll to Top