NativeScript - 经典view-model解析

本来想玩下React Native的…结果win上各种郁闷.
但还是想看看移动端.

试下NativeScript:
单纯的TS模板:

viewModel

import observable = require("data/observable");

export class HelloWorldModel extends observable.Observable {

    private _counter: number;
    private _message: string;

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

    constructor() {
        super();

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

    private updateMessage() {
        if (this._counter <= 0) {
            this.message = "Hoorraaay! You unlocked the NativeScript clicker achievement!";
        } else {
            this.message = this._counter + " test for sync taps left2";
        }
    }

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

既然让Model继承了一个Observable.我们不得不看下了.这个Model感觉就是个组件.等看NG2的版本再感受吧

class Observable {
      /**
       * String value used when hooking to propertyChange event.
       */
      public static propertyChangeEvent: string;

      /**
       * Creates an Observable instance and sets its properties according to the supplied JSON object.
       */
      constructor(json?: any);

      /**
       * Gets the name of the constructor function for this instance. E.g. for a Button class this will return "Button".
       */
      typeName: string;

      /**
       * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
       * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change"). 
       * @param callback - Callback function which will be executed when event is raised.
       * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
       */
      on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);

      /**
       * Raised when a propertyChange occurs.
       */
      on(event: "propertyChange", callback: (data: EventData) => void, thisArg?: any);

      /**
       * Shortcut alias to the removeEventListener method.
       */
      off(eventNames: string, callback?: any, thisArg?: any);

      /**
       * Adds a listener for the specified event name.
       * @param eventNames Comma delimited names of the events to attach the listener to.
       * @param callback A function to be called when some of the specified event(s) is raised.
       * @param thisArg An optional parameter which when set will be used as "this" in callback method call.
       */
      addEventListener(eventNames: string, callback: (data: EventData) => void, thisArg?: any);

      /**
       * Removes listener(s) for the specified event name.
       * @param eventNames Comma delimited names of the events the specified listener is associated with.
       * @param callback An optional parameter pointing to a specific listener. If not defined, all listeners for the event names will be removed.
       * @param thisArg An optional parameter which when set will be used to refine search of the correct callback which will be removed as event listener.
       */
      removeEventListener(eventNames: string, callback?: any, thisArg?: any);

      /**
       * Updates the specified property with the provided value.
       */
      set(name: string, value: any): void;

      /**
       * Gets the value of the specified property.
       */
      get(name: string): any;

      /**
       * Notifies all the registered listeners for the event provided in the data.eventName.
       * @param data The data associated with the event.
       */
      notify<T extends EventData>(data: T): void;

      /**
       * Notifies all the registered listeners for the property change event.
       */
      notifyPropertyChange(propertyName: string, newValue: any): void;

      /**
       * Checks whether a listener is registered for the specified event name.
       * @param eventName The name of the event to check for.
       */
      hasListeners(eventName: string): boolean;

  }

看了定义,更感觉像组件了…各种属性.时间.可以通知.注释里用button来举例,好一个组件

上面是私有属性,一般就是xml会用到的变量,数据binding来用
构造里弄默认值 ,onTap是事件处理函数

this.notifyPropertyChange("message", value) 这句肯定是重点.看后面怎么解释吧.关乎数据binding和通知机制