How to implement Observable in native-script using typescript

Question

I just started learning native-script framework and I'm following the "Get Started with JavaScript" tutorial from the official website. I have a background in Java so I'm more familiar with typescript. I tried to replace all JavaScript code to the typescript equivalent.

So far everything is OK, but when I reached Chapter three > 3.4: Adding a view model section , I got confused on how to implement the Observable in typescript. this is the code from the website:

var observableModule = require("data/observable");

var user = new observableModule.fromObject({
    email: "[email protected]",
    password: "password"
});

And this is what I came up with:

import {Observable} from 'data/observable';
class User extends Observable {
    email = "[email protected]";
    password = "password";
}

let user = new User();

When I tested it, it seems to work. Are the above codes equivalent or did I miss something?

you can try this way also docs.nativescript.org/ns-framework-modules/… — Naren
– Naren, Commented Sep 13, 2020 at 17:38

Vladimir Amiorkov · Accepted Answer · 2017-05-20 08:24:18Z

3

Yes this is the way to make an "object" observable. A different but also similar approach would be to make your entire "ViewModel" observable for example:

import { Observable } from "data/observable";

export class ViewModel extends Observable {    
    constructor() {
        super();

        this.set("propertyA", 42);
        this.set("propertyB", "some value");
    }

    public updatedValues() {
        this.set("propertyA", 3.14);
        this.set("propertyB", "some new value");
    }
}

after that if you set that ViewModel to be bindingContext of the Page you can do your normal bindings and any updates to the those properties of the ViewModel will be propagated to the view.

<Label text="{{ propertyA }}"/>
<Label text="{{ propertyB }}"/>

answered May 20, 2017 at 8:24

Vladimir Amiorkov

2,9514 gold badges22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Toni Joe Over a year ago

Thank you Vladimir

Collectives™ on Stack Overflow

How to implement Observable in native-script using typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related