NativeScript ตอนที่ 5 การอ่านค่าจาก TextField และนำไปแสดงผลใน Label

ตอนนี้ก็ยังเป็นการยุ่งเกี่ยวกับ event แต่เพิ่มการรับค่าจาก TextField และ การอัพเดท Label ครับ

เป้าหมายที่เราต้องการคือ


และเมื่อป้อนข้อความและกดปุ่ม OK ค่าใน Label จะเปลี่ยนตามดังนี้


อันดับแรกเราก็จะแก้ไขไฟล์ hello.xml ใหม่เป็น

<Page loaded="pageLoad">
     <StackLayout>
        <Label id="lblHello" text="Hello World" class="title"/>
        <TextField id="tfName" hint="Your Name" />
        <Button text="OK" tap="showName" />
    </StackLayout> 
</Page>

และแก้ไขไฟล์ hello.js เป็น

//include module "view"
var viewModule = require("ui/core/view");
//variables for label and TextField
var lblHello, tfName;

//when page is loaded
exports.pageLoad = function(args) {
    //get current page
    var page = args.object;
    //get the view by ID
    lblHello = viewModule.getViewById(page, "lblHello"); 
    tfName = viewModule.getViewById(page, "tfName");
    //console.log(tfName.text);
}

//whent button is tapped
exports.showName = function() {
 //get value from TextField
    var name = tfName.text;
    if(name.length!=0) {
        lblHello.text = "Hello "+name;
    }
    else {
        lblHello.text = "Hello anonymous";
    }
}

เท่านี้ก็จะได้ผลลัพธ์ตามต้องการครับ