Databinding in NativeScript example

page.js

const observable = require("data/observable")
const view = require("ui/core/view")

// some isolated observable and listener
const user = new observable.Observable()
user.set("Name", "Jose")
user.on("propertyChange", function (eventData) {
    console.log(`The user's current name is ${eventData.object.Name}`)
})
user.set("Name", "Antonio")

// observable bound to some label
exports.onLoaded = function (args) {
    const page = args.object
    const pageData = new observable.Observable()
    
    // property binding
    const lTitle = view.getViewById(page, "title")
    lTitle.bind({
        sourceProperty: "Title",
        targetProperty: "text"
    }, pageData)
    // bind automatically creates a listener for observable and the label (two-way)
    pageData.set("Title", "This is the title")

    // xml binding (preferred)
    page.bindingContext = pageData
    // this automatically binds the entire page to the pet observable
    pageData.set("Subtitle", "This is the subtitle")
    // so any moustache specified in XML will look for the pet's properties
}

page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo">
    <StackLayout>
        <Label id="title"></Label>
        <Label text="{{ Subtitle }}"></Label>
    </StackLayout>
</Page>