Page rebind on user event


#1

How to refresh (rebind components text) on an user event like tap or selected index change?

Background: User would’ve an option to change the app language, when the language option changed on any page, all the components on the page should bind to right language text.

This is in plain javascript app, @ngx-translate works nicely in Angular app.

Thank you.


#2

Try this,

  1. Create a standalone observable for managing language strings.
  2. Create a base observable that returns the singleton language observable as a property.
  3. Inherit all your observable from the base one you created now.
  4. If you change anything in the language observable now, everything should get updated.

#3

Thank you, I’m assuming that I’ve to extend Observable from this “tns-core-modules/data/observable”?


#4

Yes, you are right about that.


#5

Seems to be working with just one page for now, but I’ve one more question with Observables

This the code from main-page.ts

import { Page } from ‘ui/page’;
import { HelloWorldModel } from ‘./main-view-model’;
import {EventData} from “tns-core-modules/data/observable”;

// Event handler for Page “navigatingTo” event attached in main-page.xml
export function navigatingTo(args: EventData) {

And this is the code from BaseObservable

import {LangObservable} from “./LangObservable”;
import {EventData, Observable} from “tns-core-modules/data/observable”;

export class BaseObservable extends Observable{

But if import my BaseObvervable instead of “data/Observable” in the main-page.ts, it says “BaseObservable” has no expected member “EventData”

Am I missing something here?

Thanks again.


#6

Can you setup a Playground?


#7

Somehow its not working from playground.


#8

That was nearly but not exactly what I explained, I have updated the example here

It’s a quick example, may need improvements.


#9

Playground app not running?


#10

Looks good on my end, do you mean your browser doesn’t load the app or the app is not launching on device?


#11

App not launching on the device, looks like i18n files path issue?

An uncaught Exception occurred on “main” thread.
java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.preview/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Failed to find module: “…/i18n/en”, relative to: app/data/
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2924)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2985)
at android.app.ActivityThread.-wrap14(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1635)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6692)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1468)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1358)
Caused by: com.tns.NativeScriptException: Failed to find module: “…/i18n/en”, relative to: app/data/
at com.tns.Module.resolvePathHelper(Module.java:146)
at com.tns.Module.resolvePath(Module.java:55)
at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
at com.tns.Runtime.callJSMethod(Runtime.java:957)
at com.tns.Runtime.callJSMethod(Runtime.java:941)
at com.tns.Runtime.callJSMethod(Runtime.java:933)
at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
at android.app.Activity.performCreate(Activity.java:6912)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1126)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2877)
… 9 more


#12

Not sure, may be some caching issue I too faced same when I launched it now but just going to the language files, cut and paste the content, save it again solved the issue.

Or you may simply download and run locally.