This is a migrated thread and some comments may be shown as answers.

What is the difference between main-page.js and main-view.model.js when developing native apps

1 Answer 124 Views
AppBuilder in-browser client
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Harsha
Top achievements
Rank 1
Harsha asked on 06 Dec 2016, 11:23 AM
How to change the text of the xml based textField via main-page.js? Im using this.set("message", getMessage(this.counter)); to change the values via main-view-model.js. But that scenario is not working when I try in it in main-page.js. How to do this? :-) And I need an explanation to my main question. Thanks in advance.

1 Answer, 1 is accepted

Sort by
0
Nikolay Tsonev
Telerik team
answered on 08 Dec 2016, 04:10 PM
Hello,
Thank you for your interest in NativeScript 

your first question, the main-view-module file from the NativeScript JavaScript contains class, which extend Observable modules and shows way to bind properties. The main-page.js file should the main logic of the app related with main-page. file.

About the second question,  in NativeScript there are two appropriate ways to change the value of the TextField text property. 

The first one is to bind component  while using Observable Module. For more info, how the binding works in NativeScirpt you could review this article in our documentation.

The second one is to access the component by using its id and to change its text. 
The both cases have been shown in the below-attached sample code.For further info, how NativeScript works, you could review our getting started tutorial here


main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
 
    <StackLayout class="p-20">
        <TextField id="textfield" hint="Sample textfield" text="{{ textfieldtext }}" />
         
        <Button text="binding text property" tap="optionone" />
        <Button text="change text while accessing component" tap="optiontwo" />
         
    </StackLayout>
</Page>


main-page.ts

import { EventData, Observable } from 'data/observable';
import { Page } from 'ui/page';
import {TextField} from "ui/text-field"
var tmpobservable:Observable;
let page:Page;
 
export function navigatingTo(args: EventData) {
 
    page = <Page>args.object;
    tmpobservable = new Observable();
    tmpobservable.set("textfieldtext", "");
     
    page.bindingContext = tmpobservable;
}
 
export function optionone(){
    tmpobservable.set("textfieldtext", "Change text option 1")
}
 
export function optiontwo(){
    var tField:TextField =<TextField> page.getViewById("textfield");
    tField.text="Change text option 2";
}


main-page.js

var observable_1 = require("data/observable");
var tmpobservable;
var page;
function navigatingTo(args) {
    page = args.object;
    tmpobservable = new observable_1.Observable();
    tmpobservable.set("textfieldtext", "");
    page.bindingContext = tmpobservable;
}
exports.navigatingTo = navigatingTo;
function optionone() {
    tmpobservable.set("textfieldtext", "Change text option 1");
}
exports.optionone = optionone;
function optiontwo() {
    var tField = page.getViewById("textfield");
    tField.text = "Change text option 2";
}
exports.optiontwo = optiontwo;


Hope this helps.

Regards,
nikolay.tsonev
Telerik by Progress
 

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

 
Tags
AppBuilder in-browser client
Asked by
Harsha
Top achievements
Rank 1
Answers by
Nikolay Tsonev
Telerik team
Share this question
or