WinJS inline Binding Syntax

Question

I try to understand how Template Binding works with WinJS.

What I found out that you have to specify binding on an data attribute:

<div data-wind-bind="innerText:myProperty"></div>

I think I saw also something where you can define multiple Properties...

<div data-wind-bind="style.color: fontcolor; innerText: timestamp"></div>

Is there also a syntax like with other templating engines that I can specify thinks inline like (just an example from other templating engines)

<div>This is my property {{property1}} and it was created {{created_at}}</div>

now matter if its <% property %> or #{property} just something that will be parsed and replaced by the Templating engine

Thanks

Answer 1

No, there is no such syntax in WinJS Binding.

You can write this instead, however.

<div>This is my property <span data-win-bind="innerText:property1"></span> and it was created <span data-win-bind="innerText:created_at"></span></div>

Otherwise, bindings are actually created by WinJS.Binding.processAll. You can replace or monkey-patch this function and add your own template engine.

Answer 2

You can do something like

<div>This is my property <span data-win-bind="innerText: property1">property1</span> and it was created <span data-win-bind="innerText: created_at">created_at</span></div>

Or, of course, you can also use javascript to achieve the same result, by doing this:

// somefile.html
<div id="someID">This is my property {{property1}} and it was created {{created_at}}</div>

// somefile.js
var property1 = "some text";
var created_at = "some text";
var div = document.getElementById("someID");
div.innerText = "This is my property " + property1 + " and it was created " + created_at;

Hope this helps.