Over a million developers have joined DZone.

Quick and Dirty Server Side Select Helper for Handlebars.js

· Web Dev Zone

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Handlebars.js is one of  my favorite templating engines. One of the main reasons is because it is usable both on the client and server side.  While the client-side is pretty familiar, the server-side has its challenges, like having no DOM. Having no DOM means that some convenient methods like createElement don't exist, but there are times when being able to deliver a render-ready HTML page is important. 



In one of my projects, we wanted to do server-side rendering of an edit page. Nothing tricky or flashy, just send the user the data they entered previously for editing. This kind of a page is easy with just about every templating engine around. One problem HTML element is the select tag, because it is a composite element consisting of <select> enclosing one or more <option> tags. Luckily handlebars.js includes the ability create your own helpers, which are bits of code you write yourself and handlerbars invokes. Writing select helpers is pretty easy on the client since you have access to the DOM.

Most client-side helpers will generate the select and each of the options including their value and selected attributes.  I initially was trying to go this route on the server-side as well. And then I stopped myself. The lack of DOM access caused the code to quickly get more complicated than I liked. So I decided to go another way. Instead of rendering out the select element, I instead decide to render the attributes of the option element. This way my helper is much simpler. To use it, simply add:

{{option <value of option> <current value>}}

to each option element. The helper will render out the value attribute and, if it is the currently selected option, it will render the selected attribute as well.

I may change my mind and render the entire select element, but for now I like this simpler approach.
// Render an option tag's value and selected attributes
hbs.registerHelper("option", function (current, field) {
  current = hbs.Utils.escapeExpression(current);
  field = hbs.Utils.escapeExpression(field);
  var results = 'value="' + current + '" ' + (field === current ? 'selected="selected"' : "");
  return new hbs.SafeString(results);
});

<select id="goal2" name="goal2">
  <option value="">Select goal</option>
  <option {{option "cplp2" campaign.goal2}}>Cost per Lead</option>
  <option {{option "cpap2" campaign.goal2}}>Cost per Acquisition</option>
  <option {{option "cpip2" campaign.goal2}}>Cost per Inquiry</option>
</select>


Make the transition to Node.js if you are Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Troy Miles, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}