Question

我有一个共享的TypeScript代码库，可在其中跨Web应用程序（Electron桌面应用程序）重用视图模型（除其他外），现在我希望将它们与NativeScript移动应用程序重用。

考虑下面的简化示例，我想与我的NativeScript应用程序的登录页面共享一个通用的登录视图模型：

lib / shared-login-view-model.ts

export class SharedLoginViewModel {
    username: string;
    password: string;

    logIn() {
        // do lots of stuff
    }

    forgotPassword() {
        // do more stuff
    }

    // lots of other shared stuff
    // ...
}

home-view-model.ts

export class HomeViewModel extends SharedLoginViewModel {
    constructor() {
        super();
    }

    logIn() {
        super.logIn();
        alert('Logged In as ' + this.username + '!');
        // reset username property
        this.username = '';
    }
}

home-page.ts

export function pageLoaded(args: EventData) {
    let page = <Page>args.object;
    page.bindingContext = new HomeViewModel();
}

home-page.xml

<Page loaded="pageLoaded" class="page" xmlns="http://www.nativescript.org/tns.xsd">
    <ActionBar title="Log In" class="action-bar">
    </ActionBar>

    <ScrollView>
        <StackLayout class="home-panel">
            <TextField text="{{username}}" hint="username">
            </TextField>

            <TextField text="{{password}}" hint="password">
            </TextField>

            <Button text="Submit" onTap="{{logIn}}">
            </Button>
        </StackLayout>
    </ScrollView>
</Page>

但是，这仅适用于单向绑定。双向绑定不起作用，并且在this.username = ''视图模型功能中重置logIn()时可以看到。

我的理解是，NativeScript要求视图模型扩展Observable以便为双向绑定通知属性更改。问题是我已经需要扩展共享视图模型类，并且TypeScript不支持多重继承。

如何解决此问题？我需要我的视图模型是可观察的，但也要从共享的视图模型类继承。

Here是以上示例的NativeScript游乐场。

如何在使库视图模型在NativeScript中可观察的同时重用？

0 个答案: