帶有 NativeScript 7 的 ES2017

Question

我正在使用帶有普通 JavaScript 的 NativeScript 7，並且我正在嘗試在 ES2017 中編寫視圖模型代碼。 通過 ES2017，我的意思是我正在使用 ES2017 或之前發布的功能，例如import/export和class語法。

代碼運行成功，但數據未綁定。 這是代碼。

查看模型

import { fromObject } from "@nativescript/core";

export class MainViewModel extends fromObject {
    constructor() {
        super();
        this.counter = 69;
        this.message = "meow";
    }
    

    getMessage(counter) {
        if (counter <= 0)
            return "Hoorraaay! You unlocked the NativeScript clicker achievement!";
        else
            return `${counter} taps left`;
    }

    onTap() {
        console.log("Tapped");
        this.message = this.getMessage(this.counter);
        this.counter--;
        console.log(this.counter);
    }
}

主頁

import { MainViewModel } from "./main-view-model";

exports.onNavigatingTo = function(args) {
    console.log("OnNavigatingTo is called");
    const page = args.object;
    page.bindingContext = new MainViewModel();
};

主頁 XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <ActionBar title="My App" icon=""></ActionBar>
    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="{{ onTap }}" class="-primary"/>
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
</Page>

鑒於 NativeScript 7 運行 ES2017，為什么這段代碼不起作用（數據被綁定）？ 我錯過了什么？

另外，請注意console.log到目前為止沒有顯示任何內容。

編輯

為了澄清我所說的“數據被綁定”的意思，我的意思是“消息”屬性和“onTap()”函數都沒有按預期綁定到視圖。

再一次編輯 - 使用 ES5 代碼

視圖模型

const fromObject = require("@nativescript/core").fromObject;

exports.MainViewModel =  fromObject({
    counter: 69,
    message: "meow",
    
    getMessage: function(counter) {
        if (counter <= 0)
            return "Hoorraaay! You unlocked the NativeScript clicker achievement!";
        else
            return `${counter} taps left`;
    },

    onTap: function() {
        console.log("Tapped");
        this.message = this.getMessage(this.counter);
        this.counter--;
        console.log(this.counter);
    }
});

主頁

const MainViewModel = require("./main-view-model").MainViewModel;

exports.onNavigatingTo = function(args) {
    console.log("OnNavigatingTo is called");
    const page = args.object;
    page.bindingContext = MainViewModel;
};

主頁 XML（相同）

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <ActionBar title="My App" icon=""></ActionBar>
    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="{{ onTap }}" class="-primary"/>
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
</Page>

工作 ES5 代碼的屏幕截圖

Answer 1

好吧，我想通了。 我的錯誤是繼承 fromObject，這是一個返回Observable類型對象的方法。 相反，我導入了 Observable 並從中繼承了它，代碼工作起來很迷人。

但是請注意，在主頁文件， import語法沒有工作，所以我不得不使用require來代替。 這是我的代碼。

主視圖模型

import { Observable } from "@nativescript/core";

export class MainViewModel extends Observable {
    constructor() {
        super();
        this.counter = 69;
        this.message = "meow";
    }

    getMessage() {
        if (this.counter <= 0)
            return "Hoorraaay! You unlocked the NativeScript clicker achievement!";
        else
            return `${this.counter} taps left`;
    }

    onTap() {
        console.log("Tapped");
        this.set("message", this.getMessage());
        this.set("counter", this.counter-1);
        console.log(`message = ${this.message}. counter = ${this.counter}`);
    }
}

主頁

const MainViewModel = require("./main-view-model").MainViewModel;

exports.onNavigatedTo = function(args) {
    console.log("OnNavigatedTo is called");
    const page = args.object;
    page.bindingContext = new MainViewModel();
};

主頁 XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo">
    <ActionBar title="My App" icon=""></ActionBar>
    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="{{ onTap }}" class="-primary"/>
        <Label text="{{ message  }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
</Page>

請注意，在 UI 中更改綁定數據必須調用 View Model 中的set方法。

這使得 NativeScript Core 7 中的編碼更加清晰。