Implementing Observable in NativeScript with TypeScript - A Step-by-Step Guide

Question

Implementing Observable in NativeScript with TypeScript - A Step-by-Step Guide

Recently, I delved into the world of native-script framework and decided to dive into the "Get Started with JavaScript" tutorial provided on their official website. My background in Java has made me more comfortable with typescript, so I attempted to swap out all JavaScript code with its typescript counterpart.

Everything was going smoothly until I hit Chapter three > 3.4: Adding a view model section, where I found myself puzzled about how to implement Observable in typescript. The example code from the website looked like this:

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

var user = new observableModule.fromObject({
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e2e4f2e5d7f3f8faf6fef9b9f4f8fa">[email protected]</a>",
    password: "password"
});

This prompted me to come up with my own solution:

import {Observable} from 'data/observable';
class User extends Observable {
    email = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aadfd9cfd8eacec5c7cbc3c484c9c5c7">[email protected]</a>";
    password = "password";
}

let user = new User();

Upon testing, my version seemed to function correctly. Can someone confirm if these codes are equivalent or if I missed something?

javascript typescript observable nativescript

Answer 1

Answer №1

Indeed, this method is an effective way to create an observable "object". Another approach that achieves similar results involves making the entire "ViewModel" object 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");
    }
}

Subsequently, by setting this ViewModel as the bindingContext of the Page, you can perform regular bindings. Any modifications made to these properties within the ViewModel will automatically reflect in the view.

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

Answer 2

Indeed, this method is an effective way to create an observable "object". Another approach that achieves similar results involves making the entire "ViewModel" object 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");
    }
}

Subsequently, by setting this ViewModel as the bindingContext of the Page, you can perform regular bindings. Any modifications made to these properties within the ViewModel will automatically reflect in the view.

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

Implementing Observable in NativeScript with TypeScript - A Step-by-Step Guide

Answer №1

Similar questions

What is the best way to ensure that the value of a <textarea> in jQuery is consistently saved and reflected in the HTML document?

Developing components through JavaScript

How can I update an Angular Datatable to display new JSON data?

Having trouble getting CSS animations to work in Safari when triggered by JavaScript

What is the process for obtaining jsonencode data in a Laravel application?

Replace string values with an object array for a particular property

Vue alert: Issue with rendering - TypeError: Unable to access property 'NomeStr' as it is undefined

"Retrieve the x-coordinate position of a box within a specific div using

Encountering the error `ReferenceError: document is not defined` when trying to deploy a Next.js project on Vercel

How can I arrange individual events in agendaWeek view on FullCalendar.io and then merge them all into one line?

When triggered, the onClick event will launch multiple Material-UI dialogs simultaneously

Ways to dynamically manipulate HTML elements in Angular 5

"I'm looking for a way to store and fetch TypeScript objects with PouchDB. Any suggestions on

Difficulty Encountered in Rendering Component Using setTimeout Function

What is the best way to generate dynamic components on the fly in ReactJS?

Exploring Next.js 13: Enhancing Security with HTTP Cookie Authentication

Disappearing Image on Hover in JavaScript and HTML

Steps for passing a Javascript variable through POST method and then redirecting to a different page

Expanding and collapsing multiple tables in Material-UI

Can the animation be looped using setInterval()?