NativeScript/apps/app/ui-tests-app/bindings/basics-page.ts

import * as buttonModule from "tns-core-modules/ui/button";
import * as pageModule from "tns-core-modules/ui/page";
import * as textFieldModule from "tns-core-modules/ui/text-field";
import * as stackLayoutModule from "tns-core-modules/ui/layouts/stack-layout";
import * as observableModule from "tns-core-modules/data/observable";

export function createPage() {

    var page = new pageModule.Page();
    var stack = new stackLayoutModule.StackLayout();
    var sourceOneWay = new observableModule.Observable();
    var sourceTwoWay = new observableModule.Observable();
    var targetOneWay = new textFieldModule.TextField();
    var targetTwoWay = new textFieldModule.TextField();
    var buttonOneWay = new buttonModule.Button();
    var buttonTwoWay = new buttonModule.Button();
    var buttonSetText = new buttonModule.Button();

    targetOneWay.id = "textFieldOneWay";
    targetTwoWay.id = "textFieldTwoWay";
    buttonOneWay.id = "buttonOneWay";
    buttonTwoWay.id = "buttonTwoWay";
    buttonSetText.id = "buttonSetText";    

    targetOneWay.automationText = "textFieldOneWay";
    targetTwoWay.automationText = "textFieldTwoWay";
    buttonSetText.automationText = "buttonSetText";
    //buttonOneWay.automationText = "buttonOneWay";    
    //buttonTwoWay.automationText = "buttonTwoWay";    

    buttonSetText.text = "SetText";
    buttonSetText.on(buttonModule.Button.tapEvent, function () {
        targetOneWay.text = "Test";
        targetTwoWay.text = "Test";
    });
    stack.addChild(buttonSetText);

    // OneWay Binding
    var bindingOptionOneWay = {
        sourceProperty: "textSource",
        targetProperty: "text",
        twoWay: false
    };

    targetOneWay.bind(bindingOptionOneWay, sourceOneWay);
    sourceOneWay.set("textSource", "OneWay");

    buttonOneWay.on(buttonModule.Button.loadedEvent, function () {
        buttonOneWay.text = sourceOneWay.get("textSource");
    });
    buttonOneWay.on(buttonModule.Button.tapEvent, function () {
        buttonOneWay.text = sourceOneWay.get("textSource");
    });

    stack.addChild(targetOneWay);
    stack.addChild(buttonOneWay);
    
    // TwoWay Binding
    var bindingOptionTwoWay = {
        sourceProperty: "textSource",
        targetProperty: "text",
        twoWay: true
    };

    targetTwoWay.bind(bindingOptionTwoWay, sourceTwoWay);
    sourceTwoWay.set("textSource", "TwoWay");

    buttonTwoWay.on(buttonModule.Button.loadedEvent, function () {
        buttonTwoWay.text = sourceTwoWay.get("textSource");
    });
    buttonTwoWay.on(buttonModule.Button.tapEvent, function () {
        buttonTwoWay.text = sourceTwoWay.get("textSource");
    });

    stack.addChild(targetTwoWay);
    stack.addChild(buttonTwoWay);

    page.content = stack;
    return page;
}