Sending multiple parameters to WinJS.Binding.converter() function

Question

Is there a way to send more than one parameter to a WinJS.Binding.converter() function? Consider the following data and output:

        { contactName: "Tara Miller",  mainNumber: "555-405-6190", alternateNumber: "555-209-1927" },
        { contactName: "Bryan Bond",                               alternateNumber: "555-574-4270" },
        { contactName: "Jenna Siever", mainNumber: "555-843-8823", alternateNumber: "555-799-5424" },

Here is the HTML. The MyData.chooseBestNumber converter function is used to display either a person's main phone number or the words "no main number" if they don't have a main number:

<div id="listViewTemplate" data-win-control="WinJS.Binding.Template">
    <div class="contactCard">
        <div data-win-bind="innerText: contactName"></div>
        <div data-win-bind="innerText: mainNumber MyData.chooseBestNumber"></div>
    </div>
</div>

Here is the JS defining the converter function:

WinJS.Namespace.define("MyData", {
    chooseBestNumber: WinJS.Binding.converter(function (mainNumber) {
        if (mainNumber) return mainNumber;
        else return "no main number";
    }),
});

Below is what I'd ultimately like to be able to do...passing more than one parameter into the converter function so that I can return either the main number (if it is defined), the alternate number (as a fallback), or a message (if all else fails):

WinJS.Namespace.define("MyData", {
    chooseBestNumber: WinJS.Binding.converter(function (mainNumber, alternateNumber) {
        if (mainNumber) return mainNumber;
        else if (alternateNumber) return alternateNumber; 
        else return "no phone numbers";
    }),
});

Is it possible to send more than one parameter to a WinJS.Binding.converter() function?

Answer 1

You can actually bind your phone number div to the this keyword which will effectively bind the innerText property of that div to the entire model object. That way in your converter, you'd have access to the whole model.

So your updated code would look like this:

HTML

<div id="listViewTemplate" data-win-control="WinJS.Binding.Template">
    <div class="contactCard">
        <div data-win-bind="innerText: contactName"></div>
        <div data-win-bind="innerText: this MyData.chooseBestNumber"></div>
    </div>
</div>

JavaScript Converter

WinJS.Namespace.define("MyData", {
    chooseBestNumber: WinJS.Binding.converter(function (model) {
        if (model && model.mainNumber) return mainNumber;
        else if (model && model.alternateNumber) return alternateNumber;
        else return "no main number";
    }),
});