Observable doesn't work from other form TS

plugins

#1

app.ts:

import * as app from "application";
import "./bundle-config";

import { AppState } from "./config"; //that is, path to config.ts

let global=AppState.global;

global.user.email="my login";
global.user.user_title="Gabit"

app.run({ moduleName: "app-root/app-root" });

config.ts:

export namespace AppState {
    export var global = {
        user: {email: {}, user_title: "Name Middlename"}
    }
}

app-root.xml:

<nsDrawer:RadSideDrawer id="sideDrawer" xmlns:nsDrawer="nativescript-ui-sidedrawer" loaded="onLoaded">
    <nsDrawer:RadSideDrawer.drawerTransition>
        <nsDrawer:SlideInOnTopTransition/>
    </nsDrawer:RadSideDrawer.drawerTransition>

    <nsDrawer:RadSideDrawer.drawerContent>
        <GridLayout rows="auto, *" class="sidedrawer sidedrawer-left">
            <StackLayout class="sidedrawer-header">
                <Label class="sidedrawer-header-brand" text="{{ user_title }}" />
                <Label class="footnote" text="{{ email }}" />
            </StackLayout>
        </GridLayout>
    </nsDrawer:RadSideDrawer.drawerContent>
    <nsDrawer:RadSideDrawer.mainContent>
        <Frame defaultPage="login/login-page"></Frame>
    </nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>

app-root.ts:

import { AppState } from "../config"; //that is, path to config.ts
let global=AppState.global;

export function onLoaded(args): void {
    const drawerComponent = args.object;
    drawerComponent.bindingContext = global.user;
}

login-page.xml:

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd">

    <StackLayout orientation="vertical">
        <TextField id="email" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
        <TextField secure="true" text="{{ password }}" hint="Password" />

        <Button text="Sign in" tap="signIn" />
    </StackLayout>
</Page>

login-page.ts:

import * as app from "application";
import { EventData } from "data/observable";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import { NavigatedData, Page } from "ui/page";
import { topmost } from "ui/frame";
import * as fetchModule from "fetch" 

import { AppState } from "../config"; //that is, path to config.ts
let global=AppState.global;


export function signIn(args) {

    const page = args.object;
	global.user.user_title="New value";
	page.bindingContext = global.user;
}

My question about data binding.
After run onLoaded (app-root.ts) data from app-root.xml was bind and refreshed.
But after run signIn (login-page.ts) data from app-root.xml didn’t refreshed.
Where my missing ?


#2

I don’t see that you are using any Observable type here. Simple objects do not notify changes. Please refer the basics of data binding docs.

Also try to avoid using global variable, It’s reserved by framework.


#3

manojdcoder, thank you.

I released main module, and it’s work:
app-root.ts:

import { fromObject } from "data/observable";
import { AppState } from "../config"; //that is, path to config.ts

let global=AppState.global;

let obj_observ=fromObject({
    user_title: AppState.global.user.user_title,
    email: global.user.email
});


export function onLoaded(args): void {
    console.log("-=== app-root.js, onLoaded ===-");
    const drawerComponent = <RadSideDrawer>args.object;
    drawerComponent.bindingContext = new AppRootViewModel();
    drawerComponent.bindingContext = obj_observ;
}

And how can I set data to app-root.xml from other module ? (login-page.ts)


#4

I think you will have to set bindingContext again on Frame inside drawer content.


#5

How can I use bindingContext of app-root.xml in module login-page.ts ?


#6

If you want to share data between pages, use a singleton of view model.


#7

Solved:

login-page.ts:

import * as app from "application";
import { EventData, fromObject} from "data/observable";

import { AppState } from "../config"; //that is, path to config.ts

let global=AppState.global;

let obj_observ=fromObject({
    user_title: global.user.user_title,
    email: global.user.email
});

export function signIn(args) {
    const RootView = app.getRootView();
    RootView.bindingContext=obj_observ;

...