Binding helpers for WinJS

While writing my first JS app for the Windows Store, I found several features of WinJS to be very useful. One feature I used in several places is its data binding and templating support. Along the way, I discovered that custom initializers could be used to great effect.

You can download the set of helpers I created by right-clicking here and choosing “Save As…” from the menu.

What’s included? Here’s a quick summary (replicated in the comments at the top of the file:

BindingHelpers.displayNoneIfNull

Marks the element as display:none if the value is null or undefined.

Example:

<div class=”userName” data-win-bind=”style.display: user.name BindingHelpers.displayNoneIfNull”>
Name: <div class=”userNameValue” data-win-bind=”textContent: user.name”></div>
</div>

BindingHelpers.displayNoneIfNotNull

Inverse of displayNonIfNull

BindingHelpers.originalIfNull

Uses the original (markup) value if the bound value is null or undefined.

<div class=”userName” data-win-bind=”textContent: user.name BindingHelpers.originalIfNull>No user name available.</div>

BindingHelpers.fillStringTemplate

Treat the default (markup) value as a template, where the placeholder {value} is replaced with the bound value.

<div class=”userName” data-win-bind=”textContent: user.name BindingHelpers.fillStringTemplate”>Name: {value}</div>

BindingHelpers.fillLinkTemplate

Same as fillStringTemplate, but url encodes the value.

<a href=”http://website.com/accountLookup?id={value}” data-win-bind=”href: account.id BindingHelpers.fillLinkTemplate”>Account</a>

BindingHelpers.stripHtmlTags

Strips HTML tags from the value (by inserting the value into a DIV and then extracting the innerText value).

BindingHelpers.toStaticHtml

Pre-processes the value using toStaticHTML.

BindingHelpers.appendToClasses

Allows you to bind the value as a class name to the classes property.

If you have questions, founds bugs or opportunities for improvement, or any other feedback – please share in the comment section!