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

2 posts, 0 answers
  1. Harsha
    Harsha avatar
    20 posts
    Member since:
    Mar 2015

    Posted 06 Dec 2016 Link to this post

    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.
  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 08 Dec 2016 Link to this post

    Hello,
    Thank you for your interest in NativeScript 

    Regarding to your first question, the main-view-module file from the NativeScript JavaScript template, contains class, which extend Observable modules and shows simple way to bind properties. The main-page.js file should contains the main logic of the app related with main-page.xml 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 property, 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.

     
Back to Top