Skip to content

Binding helpers for WinJS

by Brandon on April 17th, 2013

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:


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


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


Inverse of displayNonIfNull


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

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


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: BindingHelpers.fillStringTemplate”>Name: {value}</div>


Same as fillStringTemplate, but url encodes the value.

<a href=”{value}” data-win-bind=”href: BindingHelpers.fillLinkTemplate”>Account</a>


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


Pre-processes the value using toStaticHTML.


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!

From → Technology, WinJS

  1. Your means of explaining all in this paragraph is genuinely nice, all can easily know
    it, Thanks a lot.

  2. .fillStringTemplate is exactly what I search. Thank you

  3. Whenever you find yourself with a banana that’s getting
    a little too ripe, peel it, and then slice it.
    But rather than scold them into eating their fruits and vegetables, I find that being creative works much nicer.

    Store any extra servings in fridge for later in the day.

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS