升- 摩尔克
混合和基础类,允许容易使用暴徒
lit。 。 。 .
混入执行在很大程度上是基于亚历山大·魏斯在他的作品
mobx-lit-element 执行。 已重写为
支持多种形式的用法(混合,或碱类),以及基于打字符来得到类型定义.
安装
作为依赖:
npm install --save @adobe/lit-mobx lit mobx
LitElement 2.0 用法
这个图书馆已经更新到最新版本的Lit 我们强烈建议你更新 但是,如果您想继续使用 LitMobx ,请使用 列表2.0 然后安装1.0主要版本:
npm install --save @adobe/lit-mobx@^1.0.0
我们将会在这一重要版本中背放任何安全补丁(尽管不期望有).
演示
npm install
npm run demo
使用量
见 Java 脚本 财务报告和审定财务报表 类型脚本 stackBlitz 上的例子项目。 见 此示例 用于在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();
}
}
进一步的例子见 演示文件夹。 。 。 .
注:可观测物只有在可观测物直接用于可检测物函数范围内时,才被连接用于更新可检测物函数。 这个图书馆的实施使我们有必要将渲染功能包装在 autorun 块来钩住这些可观测到的可重运行渲染。 如果您想要对可观察到的属性进行响应来计算在渲染函数中使用的某些其他结果,那么您需要使用普通的MobX方法来观察一个属性更改的回调或某种其他生命周期函数,来设置该观察并写入您组件中被适当装饰以驱动 Lit 常规更新周期的属性.
自定义反应
在一些罕见的情况下,应用程序可能需要在一个单一的app内拥有多个不同的主要版本的Mobx. 这可能导致各种问题,各地使用的"暴徒"版本需要从"暴徒"的别名版本中被特地导入,例如: mobx 6.x 改为 mobx6。 。 。 .
为了帮助支持这些案件 lit-mobx 提供自定义的执行 Mobx 反应 Update mixin, MobxReactionUpdateCustom,支持采取 Reaction 建筑师作为第二个论据。 这使得用户可以定义哪个版本的暴徒通过,并确保不会由lit-mobx导入引起副作用 mobx 直接说.
示例用法:
import { MobxReactionUpdateCustom } from '@adobe/lit-mobx/lib/mixin-custom.js';
// import your specific mobx version
import { Reaction } from 'mobx6';
// and pass it to the mixin to create your own mobx lit element base class
class Mobx6LitElement extends MobxReactionUpdateCustom(LitElement, Reaction) {}
捐款
欢迎捐款! 读取 贡献指南 更多信息.
许可证发放
这个项目根据Apache V2许可证获得许可. 见 自由主义 更多信息.