[TNS3.0 RC] How to extend an Observable?

[NordlingDev]

In 3.0 RC, the Observable constructor is deprecated for public use, meaning we only use static methods such as observable.fromObject and observable.fromObjectRecursive.

In 2.5.x, I could do this:

const MyObservable = (function(_super) {
  __extends(MyObservable, _super);
  function MyObservable() {
    this.foo = "bar";
  }
  
  return MyObservable;
})(Observable);

const data = new MyObservable();

But in 3.0 RC, using the Observable class is no longer advised, and we cannot extend fromObject or fromObjectRecursive since they are static methods. So how is it done?

[PeterStaev]

From what I see you can still do this, because only the constructor that accepts a JSON is depreciated. The parameter-less constructor is still valid can can be used. So you cannot do const data = new Observable({ x: 5 }) but you can do const data = new Observable();

[tsonevn]

Hi @NordlingArt,
@PeterStaev is right you still should be able to extend the Observable and to create your own view model.
For further help, you could review the template the below-attached sample code for both JavaScript and TypeScript.
JavaScript

Object.defineProperty(exports, "__esModule", { value: true });
var observable_1 = require("data/observable");
var HelloWorldModel = (function (_super) {
    __extends(HelloWorldModel, _super);
    function HelloWorldModel() {
        var _this = _super.call(this) || this;
        // Initialize default values.
        _this._counter = 42;
        _this.updateMessage();
        return _this;
    }
    Object.defineProperty(HelloWorldModel.prototype, "message", {
        get: function () {
            return this._message;
        },
        set: function (value) {
            if (this._message !== value) {
                this._message = value;
                this.notifyPropertyChange('message', value);
            }
        },
        enumerable: true,
        configurable: true
    });
    HelloWorldModel.prototype.onTap = function () {
        this._counter--;
        this.updateMessage();
    };
    HelloWorldModel.prototype.updateMessage = function () {
        if (this._counter <= 0) {
            this.message = 'Hoorraaay! You unlocked the NativeScript clicker achievement!';
        }
        else {
            this.message = this._counter + " taps left";
        }
    };
    return HelloWorldModel;
}(observable_1.Observable));
exports.HelloWorldModel = HelloWorldModel;

TypeScript

import {Observable} from 'data/observable';

export class HelloWorldModel extends Observable {

    private _counter: number;
    private _message: string;

    constructor() {
        super();

        // Initialize default values.
        this._counter = 42;
        this.updateMessage();
    }

    get message(): string {
        return this._message;
    }
    
    set message(value: string) {
        if (this._message !== value) {
            this._message = value;
            this.notifyPropertyChange('message', value)
        }
    }

    public onTap() {
        this._counter--;
        this.updateMessage();
    }

    private updateMessage() {
        if (this._counter <= 0) {
            this.message = 'Hoorraaay! You unlocked the NativeScript clicker achievement!';
        } else {
            this.message = `${this._counter} taps left`;
        }
    }
}

[NordlingDev]

@PeterStaev, @tsonevn - Oh, that's great! Thought we lost an important feature 😄

I'm hereby closing this!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.