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:

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!

From → Technology, WinJS

3 Comments
  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