Templating confusion, Binding non property values RRS feed

  • Question

  • Hi Guys,

    We are using template to bind datasource. Below is the template



    <div class="scheduleDateTitle">
        <h2 data-win-bind="innerText: ScheduleDateLabel"></h2>
    <div class="scheduleDateDate">
        <h4 data-win-bind="innerText: ScheduleDateView"></h4>



    var template = new WinJS.Binding.Template(null, { href: "/templates/blogs/tile-small.html" });
    var targetElement = document.getElementById("featuredBlogs");
    for(var i = 0; i < items.length; i++) {
         template.render(items[i], targetElement);

    Is there anyway I can bind non property item using data binding syntax? To clarify it more,

    data-win-bind="innerText: ScheduleDateView", I need to define "innerText" and its binding to "ScheduleDateView" property. Is there anyway I can just say something like "<h4>data-win-bind="ScheduleDateView"</h4>" and it injects whatever is value passed to "ScheduleDateView". I need this for dynamic CSS styling especially "-ms-grid-column{N}" or "-ms-grid-row{N}" without using Grid control which injects lots of other HTML tags.

    Monday, July 23, 2012 6:17 PM


All replies

  • http://code.msdn.microsoft.com/windowsapps/ProgrammaticBinding-de038b64

    You'll actually need to do a custom binding action (function). The sample shows you how. I would also prefer a more ad-hoc markup style like you describe, but it has perf concerns.

    • Proposed as answer by Bryan Thomas Monday, July 23, 2012 6:29 PM
    • Marked as answer by Dino He Monday, July 30, 2012 1:02 PM
    Monday, July 23, 2012 6:29 PM
  • Thanks !! Appreciate your time !! Do you know how big is the perf concern? Comfort vs Perf loss?
    Tuesday, July 24, 2012 4:29 PM
  • Trident (the layout engine) parses the HTML into a document object model. When WinJS goes through an HTML element for binding it can readily look at the binding attributes, leave them in place, and set the appropriate data on the HTML element.

    With your suggested method WinJS would have to preparse the plain text of the element and look for it's special binding markup, then it would have to remove that markup from the text, replace it, and then pass it along to Trident for parsing.

    It probably wouldn't be much slower but it can add up.

    Tuesday, July 24, 2012 4:48 PM