@adobe/lit-mobx 中文文档教程

Question

lit-mobx

Mixin 和基类允许轻松使用 mobx observables lit。

mixin 的实现很大程度上基于 Alexander Weiss 在他的著作中的工作。 mobx-lit-element 实现。 这已被重写为 支持多种形式的使用（mixin，或基类）以及基于typescript来获取类型定义。

Installation

作为依赖项：

npm install --save @adobe/lit-mobx lit mobx

LitElement 2.0 Usage

此库已更新到我们强烈建议您更新到的最新版本的 Lit。 但是，如果您希望继续将 LitMobx 与 LitElement 2.0 结合使用，请安装 1.0 主要版本：

npm install --save @adobe/lit-mobx@^1.0.0

我们将向后移植任何安全补丁（虽然不要期望有任何）在这个主要版本中是必要的。

Demo

npm install
npm run demo

Usage

请参阅 JavaScript 和 TypeScript 示例项目。 请参阅此示例，了解在不使用 Typescript 的情况下使用 Mobx v6 的演示的装饰者。

import { html, TemplateResult } from 'lit';
import { customElement, LitElement } from 'lit/decorators.js';
import { observable, action } from 'mobx';
import { MobxLitElement } from '@adobe/lit-mobx';

// create a mobx observable
class Counter {
    @observable
    public count = 0;

    @action
    public increment() {
        this.count++;
    }
}

// create instance that can be shared across components
const counter = new Counter();

// create a new custom element, and use the base MobxLitElement class
// alternatively you can use the MobxReactionUpdate mixin, e.g. `class MyElement extends MobxReactionUpdate(LitElement)`
@customElement('my-element')
export class MyElement extends MobxLitElement {
    private counter = counter;

    // any observables accessed in the render method will now trigger an update
    public render(): TemplateResult {
        return html`
            Count is ${this.counter.count}
            <br />
            <button @click=${this.incrementCount}>Add</button>
        `;
    }

    private incrementCount() {
        this.counter.increment();
    }
}

有关更多示例，请参阅演示文件夹。

Contributing

欢迎投稿！ 阅读贡献指南了解更多信息。

Licensing

这个项目是根据 Apache V2 许可证获得许可的。 有关详细信息，请参阅许可证。