locked
how to use converter?

    Question

  • how to use conventer ? who can give me a demo or example? 

    Friday, April 20, 2012 10:07 AM

Answers

  • Here is a quick walkthrough:

    Create 'Split Application'

    Modify 'sampleGroups' in 'data.js' by adding a field to it called 'good'

     var sampleGroups = [
            { key: "group1", good: 1, title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },
            { key: "group2", good: 0, title: "Group Title: 2", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription },
            { key: "group3", good: 1, title: "Group Title: 3", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription },
            { key: "group4", good: 0, title: "Group Title: 4", subtitle: "Group Subtitle: 4", backgroundImage: lightGray, description: groupDescription },
            { key: "group5", good: 1, title: "Group Title: 5", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription },
            { key: "group6", good: 0, title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }
        ];

    Modify the template in itemsPage.html to include this new field:

        <!-- This template is used to display each item in the ListView declared below. -->
        <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class ="yesNo" data-win-bind="textContent: good"></div>
            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>
    
    

    Run the app, you will see a 1 or 0 in the top left corner of the groups, Close the app

    My converter will convert 1 and 0 to Yes and No for a friendlier representation of the data

    Create the converter inside itemsPage.js:

    (function () {
        "use strict";
    
        var ui = WinJS.UI;
    
        var convertNumberToYesNo = WinJS.Binding.converter(function (theValue) {
            var retVal = "Yes";
            if (theValue < 1) {
                retVal = "No";
            }
            return retVal;
        });
    

    Expose this new method do the outside world using namespace:

     WinJS.Namespace.define("itemsPage", { convertNumberToYesNo: convertNumberToYesNo });
    

    And hook up the converter in the template you modified before:

     <div class ="yesNo" data-win-bind="textContent: good itemsPage.convertNumberToYesNo"></div>

    Run your app and you will see now that it will display "Yes" or "No" instead of 1 or 0

    -Jeff

    -Jeff


    Jeff Sanders (MSFT)

    Friday, April 20, 2012 12:49 PM
    Moderator
  • I understand now!  No, the converter does not take parameters.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, May 16, 2012 12:01 PM
    Moderator

All replies

  • Here is a quick walkthrough:

    Create 'Split Application'

    Modify 'sampleGroups' in 'data.js' by adding a field to it called 'good'

     var sampleGroups = [
            { key: "group1", good: 1, title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },
            { key: "group2", good: 0, title: "Group Title: 2", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription },
            { key: "group3", good: 1, title: "Group Title: 3", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription },
            { key: "group4", good: 0, title: "Group Title: 4", subtitle: "Group Subtitle: 4", backgroundImage: lightGray, description: groupDescription },
            { key: "group5", good: 1, title: "Group Title: 5", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription },
            { key: "group6", good: 0, title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }
        ];

    Modify the template in itemsPage.html to include this new field:

        <!-- This template is used to display each item in the ListView declared below. -->
        <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class ="yesNo" data-win-bind="textContent: good"></div>
            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>
    
    

    Run the app, you will see a 1 or 0 in the top left corner of the groups, Close the app

    My converter will convert 1 and 0 to Yes and No for a friendlier representation of the data

    Create the converter inside itemsPage.js:

    (function () {
        "use strict";
    
        var ui = WinJS.UI;
    
        var convertNumberToYesNo = WinJS.Binding.converter(function (theValue) {
            var retVal = "Yes";
            if (theValue < 1) {
                retVal = "No";
            }
            return retVal;
        });
    

    Expose this new method do the outside world using namespace:

     WinJS.Namespace.define("itemsPage", { convertNumberToYesNo: convertNumberToYesNo });
    

    And hook up the converter in the template you modified before:

     <div class ="yesNo" data-win-bind="textContent: good itemsPage.convertNumberToYesNo"></div>

    Run your app and you will see now that it will display "Yes" or "No" instead of 1 or 0

    -Jeff

    -Jeff


    Jeff Sanders (MSFT)

    Friday, April 20, 2012 12:49 PM
    Moderator
  •  thanks a lot ~

    Wednesday, April 25, 2012 3:00 AM
  • Monday, May 14, 2012 9:12 AM
  • I don't understand the question.

    Jeff Sanders (MSFT)

    Monday, May 14, 2012 12:15 PM
    Moderator
  • any way of sending a parameter to the converter as well? (i have a WPF background so that's WPF lingo i guess :-)

    http://blogs.microsoft.co.il/blogs/eladkatz @ElatKt

    Tuesday, May 15, 2012 8:58 PM
  • I understand now!  No, the converter does not take parameters.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, May 16, 2012 12:01 PM
    Moderator