TextView

Using a TextView requires the text-view module.

import * as textViewModule from "tns-core-modules/ui/text-view";

Binding two TextViews text property to observable view-model property.

<Page loaded="pageLoaded">
    <StackLayout orientation="vertical">
        <TextView text="{{ someProperty }}" />
        <TextView text="{{ someProperty }}" />
    </StackLayout>
</Page>
export function pageLoaded(args) {
  let page = args.object;
  let obj = new observable.Observable();
  obj.set("someProperty", "Please change this text!");
  page.bindingContext = obj;
}
exports.pageLoaded = pageLoaded;

Creating a TextView

var textView = new textViewModule.TextView();

Setting the text of a TextView

textView.text = "Hello, world!";

Binding text property directly to model

var model = new observable.Observable();
model.set("username", "john");
var options: bindable.BindingOptions = {
    sourceProperty: "username",
    targetProperty: "text"
}
textView.bind(options, model);
// textView.text is now "john"
model.set("username", "mary");
// textView.text is now "mary"

Setting the hint of a TextView

textView.hint = "type your username here";

Binding hint property directly to model

var model = new observable.Observable();
model.set("hint", "type your username here");
var options: bindable.BindingOptions = {
    sourceProperty: "hint",
    targetProperty: "hint"
}
textView.bind(options, model);
// TextView.hint is now "type your username here"
model.set("hint", "type your password here");
// TextView.hint is now "type your password here"

Setting the editable property of a TextView

textView.editable = false;

Binding editable property directly to model

var model = new observable.Observable();
model.set("editable", false);
var options: bindable.BindingOptions = {
    sourceProperty: "editable",
    targetProperty: "editable"
}
textView.bind(options, model);
// textView.editable is now false
model.set("editable", true);
// textView.editable is now true

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.