Replacing HTML strings with Dojo TemplatedMixin

I've been playing around with Dojo a bit recently, modifying some Episerver widgets, and extending functionality, and I ran into a scenario I wasn't really satisfied with. In one situation I encountered, I needed to supply an HTML string for a widget to utilize when rendering data for an object, but the HTML markup had some conditions to it based on the object I was on at the time. Another situation involved looping through items and adding them to a list for display in a widget, again needing to include data from the object in the markup.

I searched online for how to parse HTML strings to include object data or conditions in it, but I didn't find the kind of answer I wanted. Many of the examples online show HTML strings in the Dojo script using concatenation for adding the variables, and others involved multiple lines of node creation and dom manipulation using "dojo.place" and "domConstruct". If you want easily adjustable markup using a template approach, avoiding modifying your dojo JS, these techniques are not the most user friendly. However, I did discover a solution.

DefaultValue in PropertyList

When Episerver brought out PropertyList support in 9.0 and showed the world how to utilize it (read the article here) it rocked the Episerver developer community and changed the way we utilize the CMS to this day! Okay, that's obviously an exaggeration, but it did introduce a different property type to the community, and brought about a different way of supporting lists or collections of data, that didn't require a bunch of blocks added to a ContentArea.

As interesting as it is, however, there are some shortcomings to this functionality. After all, it's mentioned in the linked article that it is a "pre-release API that is UNSTABLE." It's expected to have some quirks and shortcomings. Thankfully, as has already been demonstrated by Grzegorz, in his PropertyList with Images article, the PropertyList, or more importantly the CollectionEditor, can be extended to modify the functionality to fit different needs.

In this article I am taking a similar approach to Grzegorz to extend the functionality, but instead of supporting images in the list, I needed to support a default value specified through code.