Access databound properties in NativeScript

user.js

const observable = require("data/observable")

exports.onLoaded = (args) => {
    const page = args.object
    
    // basically an observable constructor
    const user = new observable.fromObject({
        name: "Jose Naranjo",
        year: 1992,
        month: 11,
        day: 26,
        genders: ["Female", "Male", "Other"],
        gender: 1,  // index of selected gender
        calcAge: function (year, month, day) {
            const birthDate = new Date(year, month, day)
            const now = Date.now()
            const diff = Math.abs(now - birthDate) / 1000 / 31536000
            return diff.toFixed(2)
        }
    })
    page.bindingContext = user
}

exports.onTap = (args) => {
    const page = args.object
    const user = page.bindingContext

    console.log(`Title: ${user.title}`)
    console.log(`Birthday: ${user.day}/${user.month}/${user.year}`)
    console.log(`Age: ${user.calcAge(user.year, user.month, user.day)}`)
    console.log(`Gender: ${user.genders[user.gender]}`)
}

user.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo">
    <StackLayout>
        <Label text="{{ name + '\'s Profile' }}"></Label>
        <TextField class="header" text="{{ name }}"></TextField>
        
        <Label text="{{ 'Age: ' + calcAge(year, month, day) + ' years old' }}"></Label>
        <DatePicker year="{{ year }}" month="{{ month }}" day="{{ day }}"></DatePicker>

        <Label text="Gender: "></Label>
        <ListPicker items="{{ genders }}" selectedIndex="{{ gender }}"></ListPicker>
        
        <Button tap="onTap" text="Done"></Button>
    </StackLayout>
</Page>