locked
Template binding with Array

    Question

  • Hi all,

    I have  data which is in this format :

        var item= WinJS.Binding.define({
            itemValue: ""
        });
    
        var group = WinJS.Binding.define({
            groupName: "",
            items: new Array(4)
        });

    I have  a template which is a table having 4 rows with data. The template data is below :

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
                <div class="item">
                    <table id="ItemsTable">
                        <tr>
                            <th colspan="4" data-win-bind="innerText:groupName"></th>
                        </tr>
                        <tr id="WeekHeader">
                            <th>Item 1</th>
                            <th>Item 2</th>
                            <th>Item 3</th>
                            <th>Item 4</th>
                        </tr>
                        <tr>
                            <td data-win-bind="innerText:items[0].itemValue"></td>
                            <td data-win-bind="innerText:items[1].itemValue"></td>
    <td data-win-bind="innerText:items[2].itemValue"></td>
    <td data-win-bind="innerText:items[3].itemValue"></td>
    
                        </tr>                
    </table>
                </div>
            </div>

    But I am getting an error :

    Exception is about to be caught by JavaScript library code at line 8531, column 17 in ms-appx://microsoft.winjs.1.0/js/base.js

    0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'bind'

    If there is a handler for this exception, the program may be safely continued.

    Cannot I bind arrays to template ? What am I doing wrong here ?

    - Girija



    Tuesday, November 13, 2012 8:54 AM

Answers

  • Hi,

    To achieve what you want, you need to create a binding converter.

    JS file with a binding converter:

    (function() {
        WinJS.Namespace.define("MyProject.Converters", {
            createTable: WinJS.Binding.converter(function(array) {
                var tableData = "";
                array.forEach(function(item) {
                    tableData += "<td>" + item + "</td>";
                });
                return tableData;
            })
        });
    })();

    Your HTML:

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <table id="ItemsTable">
                <tr>
                    <th colspan="4" data-win-bind="innerText:groupName"></th>
                </tr>
                <tr id="WeekHeader">
                    <th>Item 1</th>
                    <th>Item 2</th>
                    <th>Item 3</th>
                    <th>Item 4</th>
                </tr>
                <tr data-win-bind="innerHTML: items MyProject.Converters.createTable"></tr>
            </table>
        </div>
    </div>

    • Proposed as answer by Aratys Wednesday, November 14, 2012 7:35 AM
    • Marked as answer by Girija Beuria Wednesday, November 14, 2012 8:05 PM
    Wednesday, November 14, 2012 7:32 AM

All replies

  • Hi,

    Please refer to the example at: http://msdn.microsoft.com/en-us/library/windows/apps/br229723.aspx .


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    Wednesday, November 14, 2012 2:45 AM
  • Hi Song,

    I have been through this link but that does not bind the way I want to.

    I want to know if this is possible or not ?

    - Girija

    Wednesday, November 14, 2012 3:19 AM
  • Hi,

    To achieve what you want, you need to create a binding converter.

    JS file with a binding converter:

    (function() {
        WinJS.Namespace.define("MyProject.Converters", {
            createTable: WinJS.Binding.converter(function(array) {
                var tableData = "";
                array.forEach(function(item) {
                    tableData += "<td>" + item + "</td>";
                });
                return tableData;
            })
        });
    })();

    Your HTML:

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <table id="ItemsTable">
                <tr>
                    <th colspan="4" data-win-bind="innerText:groupName"></th>
                </tr>
                <tr id="WeekHeader">
                    <th>Item 1</th>
                    <th>Item 2</th>
                    <th>Item 3</th>
                    <th>Item 4</th>
                </tr>
                <tr data-win-bind="innerHTML: items MyProject.Converters.createTable"></tr>
            </table>
        </div>
    </div>

    • Proposed as answer by Aratys Wednesday, November 14, 2012 7:35 AM
    • Marked as answer by Girija Beuria Wednesday, November 14, 2012 8:05 PM
    Wednesday, November 14, 2012 7:32 AM