Unable to bind to a WinJS.Class Function

Question

I'm attempting to bind an ListView Template to a method on a class defined using WinJS.Class.Define, however I keep running into the issue of marksupportedforprocessing. When I do mark it for processing, what shows up on my template is the source of the function rather than the result of the function. Is there something I'm doing wrong?

var _MyClass = WinJS.Class.define(
            function () {
                this.FirstName = "";
                this.LastName = "";
            },
            {
                FirstName: "",
                LastName: "",
                FullName: function () {
                    return this.FirstName + ' ' + this.LastName;
                }

            }
        );

In my WinJS.Binding.Template, I'm attempting to bind using:

<div data-win-bind="textContext: FullName"></div>

I can get the FirstName and LastName to bind fine, how do I get the result of FullName to bind properly as well?

Answer 1

You'll need to define the property with the get/set accessors:

FullName: { 
     get : function () {
         return this.FirstName + ' ' + this.LastName;
     }
}

The above creates a property called FullName which uses the function assigned to get to retrieve the value.