Package Exports

mota

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mota) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Overview

Mota 是一个面向 React 应用的状态管理库，希望用纯粹的、普通的 JavaScript 为应用编写不强依赖于框架的「业务模型」，然后，仅由 Mota 将「业务模型」关联到 React 应用。

此外，Mota 同时支持 Class 和 Hook 的两种编程风格。

Install

通过 npm 安装，如下

$ npm i mota --save

API

model

DemoModel.js

export class DemoModel {
  count = 0;
  add = ()=>{
    this.count += 1;
  }
}

Demol.js

import { model } from "mota";
import { DemoModel } from "./DemoModel"

@model(DemoModel)
export class Demo extends Component{
  render() {
    const {count, add} = this.model
    return <div>
      {count} <button onClick={add}>Add</button>
    </div>
  }
}

useModel

DemoModel.js

export const state = {
  count: 0,
}

export function add(){
  state.count += 1;
}

Demo.js

import { useModel } from "mota";
import { state, add } from "./DemoModel";

export function Demo{
  const { count } = useModel(state);
  return <div>
    {count} <button onClick={add}>Add</button>
  </div>
}

binding

For class

export class DemoModel {
  message = "hello";
  print = ()=> {
    console.log(this.message);
  }
}

@model(DemoModel)
@binding
export class Demo extends Component{
  render() {
    const { print } = this.model
    return <div>
      <input data-bind="message"/>
      <button onClick={print}>Print</button>
    </div>
  }
}

For hook

export const state = {
  message = "hello";
}

export function print(){
 console.log(state.message);
}

export function Demo(){
  const model = useModel(state);
  return binding(<div>
    <input data-bind="message"/>
    <button onClick={print}>Print</button>
  </div>, model);
}

Examples

在线 TodoList 示例 (示例源码)

JSPM

mota