How do I implement custom rendering logic in dust.js?

Question

I'm using dust.js to render a list of variable names that are sometimes long and contain underscores like:

SUM_COUNT_LABOR_COUNTRIES_SMS_PAST

The browser doesn't wrap on underscores so it can get ugly. I'd like my dust template to add a zero-width space after each underscore so the browser can wrap it. This definitely belongs in the template layer and not with the model, but I can't figure out how to properly achieve this with dust.js and it's otherwise very good principle of separating presentation from logic.

Do I create a "helper" function? Where do I put the helper function? How do I call it from the template?

Answer 1

there are many ways in dust to approach this. what i think you're looking for is to probably define a dust filter. you can extend dust.filters to add your own filter. dust.filters looks like this in the source:

dust.filters = {
  h: function(value) { return dust.escapeHtml(value); },
  j: function(value) { return dust.escapeJs(value); },
  u: encodeURI,
  uc: encodeURIComponent,
  js: function(value) { if (!JSON) { return value; } return JSON.stringify(value); },
  jp: function(value) { if (!JSON) { return value; } return JSON.parse(value); }
};

so what you want to do is add another key-value to it that filters your variable. e.g. if you use underscore:

_.extend(dust.filters, {zws: function(value){ your code here}})

then you can call it in your dust template like so:

the variable is: {variable|zws}

hope this helps.