diff --git a/docs/data.js b/docs/data.js index bed0f3b..ca9adb9 100644 --- a/docs/data.js +++ b/docs/data.js @@ -1 +1 @@ -window.DOC_DATA={"locales":[{"name":"zh","text":"中文 (CN)","title":"Mota","groups":[{"name":"guide","text":"使用指南","docs":[{"group":"guide","name":"quick","title":"快速开始","index":1,"source":"# Mota\n\n## 简述 \n\nReact 是一个「视图层」的 UI 框架，以常见的 MVC 来讲 React 仅是 View，而我们在编写应用时，通常还需要关注更加重要的 model，对于 React 来讲，我们常常需要一个「状态管理」库。然而，目前大多数针对 React 的状态管理库都是「强依赖」过多的侵入本应该独立的业务模型中，导致「业务逻辑」对应的代码并不能轻易在其它地方重用，往往这些框架还具有「强排它性」，但是「业务模型」应该是没有过多依赖，应该是无关框架的，它应该随时可以被用在任何合适的 JavaScript 环境中，使用 mota 你可以用原生的普通的 JavaScript 代码编写你的「业务模型」，并让你的「业务模型」在不同框架、不同运行环境下重用更为容易。\n\nMota 是一个响应式的 React 应用状态管理库，基于 Mota 你可以用单纯无依赖的 JavaScript 为应用编写「业务模型」，并轻易的将「业务模型」关联到 React 应用中。\n\n## 示例\n\n[在线 TodoList 示例](http://houfeng.net/dn-template-mota/example/)\n([示例源码](https://github.com/Houfeng/dn-template-mota))\n\n## 安装\n\n通过 npm 安装，如下\n```sh\n$ npm i mota --save \n```\n\n或通过 `dawn` 脚手脚加创建工程，如下\n\n```sh\n$ mkdir your_path\n$ cd your_path\n$ dn init -t mota\n$ dn dev\n```\n\n需要先安装 dawn（[Dawn 安装及使用文档](https://alibaba.github.io/dawn/docs/)）\n\n## 结构\n\n一个 `mota` 工程的通常结构如下\n\n```sh\n.\n├── README.md\n├── package.json\n└── src\n ├── assets\n │   ├── common.less\n │   ├── favicon.ico\n │   └── index.html\n ├── components\n │   ├── todoApp.js\n │   └── todoItem.js\n ├── index.js\n └── models\n ├── TodoItem.js\n ├── TodoList.js\n └── index.js\n```\n\n## 文档\n- [快速开始](http://houfeng.net/mota/#!/zh/guide/quick)\n- [编写业务模型](http://houfeng.net/mota/#!/zh/guide/model)\n- [将组件属性映射到模型](http://houfeng.net/mota/#!/zh/guide/mapping)\n- [自执行函数](http://houfeng.net/mota/#!/zh/guide/autorun)\n- [监听模型变化](http://houfeng.net/mota/#!/zh/guide/watch)\n- [将模型数据与表单绑定](http://houfeng.net/mota/#!/zh/guide/binding)\n\n## 链接\n- [版本发布日志](https://github.com/Houfeng/mota/releases)\n- [MIT 开源协议](https://tldrlegal.com/license/mit-license)","filename":"markdowns/quick.md","root":"/Users/Houfeng/my/dev/mota","result":"

Mota

\n

简述

\n

React 是一个「视图层」的 UI 框架，以常见的 MVC 来讲 React 仅是 View，而我们在编写应用时，通常还需要关注更加重要的 model，对于 React 来讲，我们常常需要一个「状态管理」库。然而，目前大多数针对 React 的状态管理库都是「强依赖」过多的侵入本应该独立的业务模型中，导致「业务逻辑」对应的代码并不能轻易在其它地方重用，往往这些框架还具有「强排它性」，但是「业务模型」应该是没有过多依赖，应该是无关框架的，它应该随时可以被用在任何合适的 JavaScript 环境中，使用 mota 你可以用原生的普通的 JavaScript 代码编写你的「业务模型」，并让你的「业务模型」在不同框架、不同运行环境下重用更为容易。

\n

Mota 是一个响应式的 React 应用状态管理库，基于 Mota 你可以用单纯无依赖的 JavaScript 为应用编写「业务模型」，并轻易的将「业务模型」关联到 React 应用中。

\n

示例

\n

在线 TodoList 示例\n(示例源码)

\n

安装

\n

通过 npm 安装，如下

\n
$ npm i mota --save \n
\n

或通过 dawn 脚手脚加创建工程，如下

\n
$ mkdir your_path\n$ cd your_path\n$ dn init -t mota\n$ dn dev\n
\n

需要先安装 dawn（Dawn 安装及使用文档）

\n

结构

\n

一个 mota 工程的通常结构如下

\n
.\n├── README.md\n├── package.json\n└── src\n    ├── assets\n    │   ├── common.less\n    │   ├── favicon.ico\n    │   └── index.html\n    ├── components\n    │   ├── todoApp.js\n    │   └── todoItem.js\n    ├── index.js\n    └── models\n        ├── TodoItem.js\n        ├── TodoList.js\n        └── index.js\n
\n

文档

\n\n

链接

\n\n"},{"group":"guide","name":"model","title":"编写业务模型","index":2,"source":"# 编写业务模型\n\n在你编写模型之前，先放下 React 也放下 Mota，就用单纯的 JavaScript 去编写你的业务模型，或有一个或多个类、或就是几个 Object，依它们应有的、自然的关系去抽像就行了，业务模型不依赖于 UI、也不依赖于某个框架，它易于测试，你可以针对它做单元测试。它易于重用，你可以将它用在合适的地方。最后， Mota 只是出场把它关联到 React。\n\n在 Mota 中「模型」可以是由一个 `class` 或普通的的 `Object`，整个「业务模型层」会由多个 `class` 和多个 `Object` 组成，而编写模型所需要的知识就是 JavaScript 固有的编程的知识。\n\n如下示例通过编写一个名为 `User` 的 `class` 创建了一个「用户模型」\n\n```js\nexport default class User {\n firstName = 'Jack';\n lastName = 'Hou';\n get fullName(){\n reutrn `${this.firstName} ${this.lastName}`;\n }\n}\n```\n\n也可以是一个 `Object`，通常这个模型需要是「单例」时，可采用这种方式，如下\n\n```js\nexport default {\n firstName: 'Jack',\n lastName: 'Hou',\n get fullName(){\n reutrn `${this.firstName} ${this.lastName}`;\n }\n};\n```\n\n在「业务模型」编写完成后，可以通过 `@model` 将某个「类」或「类的实例」关联到指定组件，关联后便可以在组件中使用 `this.model` 访问「模型的成员变量或方法」了，Mota 还会自动「收集组件依赖」，在组件「依赖的模型数据」发生变化时，自动响应变化并「驱动组件重新渲染」，如下\n\n```js\nimport { model,binding } from 'mota';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport User from './models/user';\n\n@model(User)\nclass App extends React.Component {\n\n onChange(field,event){\n this.model[field] = event.target.value;\n }\n\n render(){\n return
\n

{this.model.fullName}

\n

\n \n
\n \n

\n
;\n }\n}\n\nReactDOM.render(, mountNode);\n```\n\n值得注意的是，在使用 `@model` 时如果传入的是一个 `class` 最终每个组件实例都会自动创建一个 `独立的实例`，这样带来的好处是「当一个页面中有同一个组件的多个实例时，不会相互影响」。","filename":"markdowns/model.md","root":"/Users/Houfeng/my/dev/mota","result":"

编写业务模型

\n

在你编写模型之前，先放下 React 也放下 Mota，就用单纯的 JavaScript 去编写你的业务模型，或有一个或多个类、或就是几个 Object，依它们应有的、自然的关系去抽像就行了，业务模型不依赖于 UI、也不依赖于某个框架，它易于测试，你可以针对它做单元测试。它易于重用，你可以将它用在合适的地方。最后， Mota 只是出场把它关联到 React。

\n

在 Mota 中「模型」可以是由一个 class 或普通的的 Object，整个「业务模型层」会由多个 class 和多个 Object 组成，而编写模型所需要的知识就是 JavaScript 固有的编程的知识。

\n

如下示例通过编写一个名为 User 的 class 创建了一个「用户模型」

\n
export default class User {\n  firstName = 'Jack';\n  lastName = 'Hou';\n  get fullName(){\n    reutrn `${this.firstName} ${this.lastName}`;\n  }\n}\n
\n

也可以是一个 Object，通常这个模型需要是「单例」时，可采用这种方式，如下

\n
export default {\n  firstName: 'Jack',\n  lastName: 'Hou',\n  get fullName(){\n    reutrn `${this.firstName} ${this.lastName}`;\n  }\n};\n
\n

在「业务模型」编写完成后，可以通过 @model 将某个「类」或「类的实例」关联到指定组件，关联后便可以在组件中使用 this.model 访问「模型的成员变量或方法」了，Mota 还会自动「收集组件依赖」，在组件「依赖的模型数据」发生变化时，自动响应变化并「驱动组件重新渲染」，如下

\n
import { model,binding } from 'mota';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport User from './models/user';\n\n@model(User)\nclass App extends React.Component {\n\n  onChange(field,event){\n    this.model[field] = event.target.value;\n  }\n\n  render(){\n    return <div>\n      <p>{this.model.fullName}</p>\n      <p>\n        <input onChange={this.onChange.bind(this,'firstName')}/>\n        <br/>\n        <input onChange={this.onChange.bind(this,'lastName')}/>\n      </p>\n    </div>;\n  }\n}\n\nReactDOM.render(<App/>, mountNode);\n
\n

值得注意的是，在使用 @model 时如果传入的是一个 class 最终每个组件实例都会自动创建一个 独立的实例，这样带来的好处是「当一个页面中有同一个组件的多个实例时，不会相互影响」。

\n"},{"group":"guide","name":"mapping","title":"属性映射","index":3,"source":"# 属性映射\n\n在 React 中通常会将应用折分为多个组件重用它们，并在用时传递给它「属性」，Mota 提供了将「组件属性」映射到「模型数据」的能力，基于 `model` 编程会让「视图层」的编写更为方例，专注于 UI 的呈现，如下\n\n```js\n@model({ value: 'demo' })\n@mapping(['value'])\nclass Demo extends React.Component {\n render () {\n return
{this.model.value}
;\n }\n}\n```\n\n上边的代码通过 `mapping` 将 `Demo` 这个组件的 `value` 属性映射到了 `model.value` 上，在组件的属性 `value` 发生变化时，会自动同步到 `model.value` 中。\n\n通过一个 `map` 进行映射，还可以让「组件属性」和「模型的成员」使用不同名称，如下:\n\n```js\n@model({ value: 'demo' })\n@mapping({ content: 'value' })\nclass Demo extends React.Component {\n render () {\n return
{this.model.value}
;\n }\n}\n```\n\n上边的代码，将组件 demo 的 `content` 属性映射到了 `model.value` 上，那么这个组件就可以这样使用了\n\n```js\nfunction App(){\n return ;\n}\n```\n\n`Demo` 组件的 `content` 属性，将自动被赋值给 `model.value`，如果没有 `mapping`，通常我们就需要在 `componentDidMount` 和 `componentWillReceiveProps` 之类的生命周函数去处理。其实，`mapping` 就像是一个语法糖，使用它将不再需要手动处理 prop->model 的更新了。","filename":"markdowns/mapping.md","root":"/Users/Houfeng/my/dev/mota","result":"

属性映射

\n

在 React 中通常会将应用折分为多个组件重用它们，并在用时传递给它「属性」，Mota 提供了将「组件属性」映射到「模型数据」的能力，基于 model 编程会让「视图层」的编写更为方例，专注于 UI 的呈现，如下

\n
@model({ value: 'demo' })\n@mapping(['value'])\nclass Demo extends React.Component {\n  render () {\n    return <div>{this.model.value}</div>;\n  }\n}\n
\n

上边的代码通过 mapping 将 Demo 这个组件的 value 属性映射到了 model.value 上，在组件的属性 value 发生变化时，会自动同步到 model.value 中。

\n

通过一个 map 进行映射，还可以让「组件属性」和「模型的成员」使用不同名称，如下:

\n
@model({ value: 'demo' })\n@mapping({ content: 'value' })\nclass Demo extends React.Component {\n  render () {\n    return <div>{this.model.value}</div>;\n  }\n}\n
\n

上边的代码，将组件 demo 的 content 属性映射到了 model.value 上，那么这个组件就可以这样使用了

\n
function App(){\n  return <Demo content={'yyyy'} />;\n}\n
\n

Demo 组件的 content 属性，将自动被赋值给 model.value，如果没有 mapping，通常我们就需要在 componentDidMount 和 componentWillReceiveProps 之类的生命周函数去处理。其实，mapping 就像是一个语法糖，使用它将不再需要手动处理 prop->model 的更新了。

\n"},{"group":"guide","name":"autorun","title":"自执行函数","index":4,"source":"# 自执行函数\n\nMota 中提供了一个 `autorun` 函数，可用于装饰 React 组件的成员方法，被装饰的「成员方法」将会在组件挂载后自动执行一次，Mota 将「收集方法中依赖的模型数据」，在依赖的模型数据发生变化时会「自动重新执行」对应的组件方法。\n\n示例\n\n```js\nimport { Component } from 'react';\nimport { model, autorun } from 'mota';\nimport DemoModel from './models/demo';\n\n@model(DemoModel)\nexport default Demo extends Component {\n\n @autorun\n test() {\n console.log(this.model.name);\n }\n\n}\n```\n\n上边的示例代码中，组件在被挂载后将会自动执行 `test` 方法，同时 mota 会发现方法中依赖了 `model.name`，那么，在 `model.name` 发生变化时，就会重新执行 `test` 方法。","filename":"markdowns/autorun.md","root":"/Users/Houfeng/my/dev/mota","result":"

自执行函数

\n

Mota 中提供了一个 autorun 函数，可用于装饰 React 组件的成员方法，被装饰的「成员方法」将会在组件挂载后自动执行一次，Mota 将「收集方法中依赖的模型数据」，在依赖的模型数据发生变化时会「自动重新执行」对应的组件方法。

\n

示例

\n
import { Component } from 'react';\nimport { model, autorun } from 'mota';\nimport DemoModel from './models/demo';\n\n@model(DemoModel)\nexport default Demo extends Component {\n\n  @autorun\n  test() {\n    console.log(this.model.name);\n  }\n\n}\n
\n

上边的示例代码中，组件在被挂载后将会自动执行 test 方法，同时 mota 会发现方法中依赖了 model.name，那么，在 model.name 发生变化时，就会重新执行 test 方法。

\n"},{"group":"guide","name":"watch","title":"监听模型变化","index":5,"source":"# 监听模型变化\n\n\nMota 中提供了一个 `watch` 函数，可用于装饰 React 组件的成员方法，`watch` 可以指定要观察的「模型数据」，在模型数据发变化时，就会自动执行「被装饰的组件方法」，`watch` 还可以像 `autorun` 一样自动执行一次，但它和 `autorun` 还是不尽相同，主要有如下区别\n\n- `autorun` 会自动收集依赖，而 `watch` 不会关心组件方法中有何依赖，需要手动指定依赖的模型数据\n- `watch` 默认不会「自动执行」，需显式的指定「立即执行参数为 true」，才会自动执行首次。\n- `autorun` 依赖的是「模型数据」本身，而 `watch` 依赖的是「计算函数」每次的「计算结果」\n \n示例\n\n```js\nimport { Component } from 'react';\nimport { model, autorun } from 'mota';\nimport DemoModel from './models/demo';\n\n@model(DemoModel)\nexport default Demo extends Component {\n\n @watch(model=>model.name)\n test() {\n console.log('name 发生了变化');\n }\n\n}\n```\n\n上边的代码，通过 `watch` 装饰了 `test` 方法，并指定了观察的模型数据 `model.name`，那么每当 `model.name` 发生变\b化时，都会打印 `name 发生了变化`.\n\n`watch` 是否重新执行，取决于 `watch` 的作为第一个参数传给它的「计算函数」的计算结果，每当依赖的模型数据发生变化时 `watch` 都会重执行计算函数，当计算结果有变化时，才会执行被装饰的「组件方法」，示例\n\n```js\nexport default Demo extends Component {\n\n @watch(model=>model.name+model.age)\n test() {\n console.log('name 发生变化');\n }\n\n}\n```\n\n有时，我们希望 `watch` 能首先自动执行一次，那么可通过向第二个参数传一个 `true` 声明这个 `watch` 要自动执行一次。\n\n```js\nexport default Demo extends Component {\n\n @watch(model=>model.name,true)\n test() {\n console.log('name 发生变化');\n }\n\n}\n```\n\n上边的 `test` 方法，将会在「组件挂载之后自动执行」，之后在 `model.name` 发生变化时也将自动重新执行。","filename":"markdowns/watch.md","root":"/Users/Houfeng/my/dev/mota","result":"

监听模型变化

\n

Mota 中提供了一个 watch 函数，可用于装饰 React 组件的成员方法，watch 可以指定要观察的「模型数据」，在模型数据发变化时，就会自动执行「被装饰的组件方法」，watch 还可以像 autorun 一样自动执行一次，但它和 autorun 还是不尽相同，主要有如下区别

\n\n

示例

\n
import { Component } from 'react';\nimport { model, autorun } from 'mota';\nimport DemoModel from './models/demo';\n\n@model(DemoModel)\nexport default Demo extends Component {\n\n  @watch(model=>model.name)\n  test() {\n    console.log('name 发生了变化');\n  }\n\n}\n
\n

上边的代码，通过 watch 装饰了 test 方法，并指定了观察的模型数据 model.name，那么每当 model.name 发生变\b化时，都会打印 name 发生了变化.

\n

watch 是否重新执行，取决于 watch 的作为第一个参数传给它的「计算函数」的计算结果，每当依赖的模型数据发生变化时 watch 都会重执行计算函数，当计算结果有变化时，才会执行被装饰的「组件方法」，示例

\n
export default Demo extends Component {\n\n  @watch(model=>model.name+model.age)\n  test() {\n    console.log('name 发生变化');\n  }\n\n}\n
\n

有时，我们希望 watch 能首先自动执行一次，那么可通过向第二个参数传一个 true 声明这个 watch 要自动执行一次。

\n
export default Demo extends Component {\n\n  @watch(model=>model.name,true)\n  test() {\n    console.log('name 发生变化');\n  }\n\n}\n
\n

上边的 test 方法，将会在「组件挂载之后自动执行」，之后在 model.name 发生变化时也将自动重新执行。

\n"},{"group":"guide","name":"binding","title":"数据绑定","index":6,"source":"# 数据绑定\n\n\n### 基本用法\n\n不要惊诧，就是「双向绑定」。Mota 不排斥「双向绑定」，使用 Mota 能够实现类似 `ng` 或 `vue` 的绑定效果。还是前边小节中的模型，我们来稍微改动一下组件的代码\n\n```js\nimport { model,binding } from 'mota';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport User from './models/user';\n\n@model(User)\n@binding\nclass App extends React.Component {\n render(){\n const { fullName, firstName, popup } = this.model;\n return
\n

{fullName}

\n

\n \n \n

\n
;\n }\n}\nReactDOM.render(, mountNode);\n```\n\n~~其中的「关键」就是 `@binding`，使用 `@binding` 后~~ (>=1.2.0 的版本将会自动处理，不必显示的启用)，组件便具备了「双向绑定」的能力，在 `jsx` 中便可以通过名为 `data-bind` 的自定义 `attribute` 进行绑定了，`data-bind` 的值是一个「绑定表达式字符串」，绑定表达式执行的 `scope` 是 `model` 而不是 `this`，也就是只能与 `模型的成员` 进行绑定。\n\n会有一种情况是当要绑定的数据是一个循环变量时，「绑定表达式」写起会较麻烦也稍显长，比如\n\n```js\n@model(userModel)\n@binding\nclass App extends React.Component {\n render(){\n const { userList } = this.model;\n return
    \n {userList.map((user,index)=>(\n
  • \n \n {user.name}\n
    • \n ))}\n
;\n }\n}\n```\n\n因为「绑定表达式」的执行 `scope` 默认是 `this.model`，以及「表达式是个字符串」，看一下 `userList[${index}].selected` 这并不友好，为此 Mota 还提供了一个名为 `data-scope` 的 `attribute`，通过它能改变要绑定的 `scope`，参考如下示例\n\n```js\n@model(userModel)\n@binding\nclass App extends React.Component {\n render(){\n const { userList } = this.model;\n return
    \n {userList.map(user=>(\n
  • \n \n {user.name}\n
    • \n ))}\n
;\n }\n}\n```\n\n通过 `data-scope` 将 `input` 的绑定上下文对象声明为当前循环变量 `user`，这样就可以用 `data-bind` 直接绑定到对应 `user` 的属性上了。\n\n### 原生表单控件\n\n所有的原生表单控件，比如「普通 input、checkbox、radio、textarea、select」都可以直接进行绑定。其中，「普通 input 和 textrea」比较简单，将一个字符类型的模型数据与控件绑定就行了，而对于「checkbox 和 radio」 有多种不同的绑定形式。\n\n将「checkbox 或 radio」绑定到一个 `boolean` 值，此时会将 checkbox 或 radio 的 `checked` 属性和模型数据建立绑定，`checked` 反应了 `boolean` 变量的值，参考如下示例\n\n```js\n@model({ selected:false })\n@binding\nclass App extends React.Component {\n render(){\n return
\n \n \n
;\n }\n}\n```\n\n如上示例通过 `this.model.selected` 就能拿到当前 checkbox 或 radio 的选中状态。\n\n\n将 checkbox 绑定到一个「数组」，通常是多个 checkbox 绑定同一个数组变量上，此时和数据建立绑定的是 checkbox 的 value，数据中会包含当前选中的 checkbox 的 value，如下\n\n```js\n@model({ selected:[] })\n@binding\nclass App extends React.Component {\n render(){\n return
\n \n \n
;\n }\n}\n```\n\n如上示例，通过 `this.selected` 就能知道当前有哪些 checkbox 被选中了，并拿到所有选中的 value\n\n\n将多个 radio 绑定我到一个「字符类型的变量」，此时和数据建立绑定的是 raido 的 value，因为 radio 是单选的，所以对应的数据是当前选中的 radio 的 value，如下\n\n```js\n@model({ selected:'' })\n@binding\nclass App extends React.Component {\n render(){\n return
\n \n \n
;\n }\n}\n```\n通过 `this.model.selected` 就能拿到当前选中的 radio 的 `value`\n\n\n### 自定义组件\n\n但是对于一些「组件库」中的「部分表单组件」不能直接绑定，因为 Mota 并没有什么依据可以判断这是一个什么组件。所以 Mota 提供了一个名为 `bindable` 的函数，用将任意组件包装成「可绑定组件」。\n\nbindable 有两种个参数，用于分别指定「原始组件」和「包装选项」\n\n```js\n//可以这样\nconst MyComponent = bindable(opts, Component);\n//也可这样\nconst MyCompoent = bindable(Component, opts);\n```\n\n关建是 `bindable` 需要的 `opts`，通过 `opts` 我们可以造诉 Mota 如何绑定这个组件，`opts` 中有两个重要的成员，它的结构如下\n\n```js\n{\n value: ['value 对应的属性名'],\n event: ['value 改变的事件名']\n}\n```\n\n所以，我们可以这样包装一个自定义文本输入框\n\n```js\nconst MyInput = bindable(Input,{\n value: ['value'],\n event: ['onChange']\n});\n```\n\n对这种「value 不需要转换，`change` 能通过 `event` 或 `event.target.value` 拿到值」的组件，通过如上的代码就能完成包装了。\n\n对于有 `onChange` 和 `value` 的这类文本输入组件，因为 opts 的默认值就是\n\n```js\n{\n value: ['value'],\n event: ['onChange']\n}\n```\n\n所以，可以更简单，这样就行，\n```js\nconst MyInput = bindable(Input);\n```\n\n而对于 checkbox 和 radio 来讲，如上边讲到的它「根据不同的数据型有不同的绑定形式」，这就需要指定处理函数了，如下\n\n```js\nconst radioOpts = {\n prop: ['checked', (ctx, props) => {\n const mValue = ctx.getValue();\n if (typeof mValue == 'boolean') {\n return !!mValue;\n } else {\n return mValue == props.value;\n }\n }],\n event: ['onChange', (ctx, event) => {\n const { value, checked } = event.target;\n const mValue = ctx.getValue();\n if (typeof mValue == 'boolean') {\n ctx.setValue(checked);\n } else if (checked) ctx.setValue(value);\n }]\n};\n```\n\n通过 `prop` 的第二个值，能指定「属性处理函数」，`event` 的第二个值能指取「事件处理函数」，处理函数的 `ctx` 是个特殊的对象 \n\n- `ctx.getValue` 能获取「当前绑定的模型数据」\n- `ctx.setValue` 能设置「当前绑定的模型数据」\n\n上边是 `radio` 的配置，首先，在「属性处理函数」中通过绑定的「模型数据的类型」决定 `checked` 最终的状态是什么，并在函数中返回。再次，在「事件处理函数」中通过绑定的「模型数据的类型」决定将什么值回写到模型中。\n\n通过「属性处理函数」和「事件处理函数」几乎就能将任意的自定义组件转换为「可绑定组件」了。\n\n另外，对于常见的 `CheckBox` 和 `Radio` 类型的组件 Mota 也提供了内建的 `opts` 配置支持，如果一个自定义组件拥有和「原生 checkbox 一致的属性和事件模型」，那边可以直接用简单的方式去包装，如下\n\n```js\nconst MyCheckBox = bindable('checkbox',CheckBox);\nconst MyRadio = bindable('radio',Radio);\n```\n\n好了，关于绑定就这些了。","filename":"markdowns/binding.md","root":"/Users/Houfeng/my/dev/mota","result":"

数据绑定

\n

基本用法

\n

不要惊诧，就是「双向绑定」。Mota 不排斥「双向绑定」，使用 Mota 能够实现类似 ng 或 vue 的绑定效果。还是前边小节中的模型，我们来稍微改动一下组件的代码

\n
import { model,binding } from 'mota';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport User from './models/user';\n\n@model(User)\n@binding\nclass App extends React.Component {\n  render(){\n    const { fullName, firstName, popup } = this.model;\n    return <div>\n      <p>{fullName}</p>\n      <p>\n        <input data-bind=\"firstName\"/>\n        <button onClick={popup}> click me </button>\n      </p>\n    </div>;\n  }\n}\nReactDOM.render(<App/>, mountNode);\n
\n

其中的「关键」就是 @binding，使用 @binding 后 (>=1.2.0 的版本将会自动处理，不必显示的启用)，组件便具备了「双向绑定」的能力，在 jsx 中便可以通过名为 data-bind 的自定义 attribute 进行绑定了，data-bind 的值是一个「绑定表达式字符串」，绑定表达式执行的 scope 是 model 而不是 this，也就是只能与 模型的成员 进行绑定。

\n

会有一种情况是当要绑定的数据是一个循环变量时，「绑定表达式」写起会较麻烦也稍显长，比如

\n
@model(userModel)\n@binding\nclass App extends React.Component {\n  render(){\n    const { userList } = this.model;\n    return <ul>\n     {userList.map((user,index)=>(\n       <li key={user.id}>\n         <input type=\"checkobx\" data-bind={`userList[${index}].selected`}>\n         {user.name}\n       </li>\n     ))}\n    </ul>;\n  }\n}\n
\n

因为「绑定表达式」的执行 scope 默认是 this.model，以及「表达式是个字符串」，看一下 userList[${index}].selected 这并不友好，为此 Mota 还提供了一个名为 data-scope 的 attribute，通过它能改变要绑定的 scope，参考如下示例

\n
@model(userModel)\n@binding\nclass App extends React.Component {\n  render(){\n    const { userList } = this.model;\n    return <ul>\n     {userList.map(user=>(\n       <li key={user.id}>\n         <input type=\"checkobx\" data-scope={user} data-bind=\"selected\">\n         {user.name}\n       </li>\n     ))}\n    </ul>;\n  }\n}\n
\n

通过 data-scope 将 input 的绑定上下文对象声明为当前循环变量 user，这样就可以用 data-bind 直接绑定到对应 user 的属性上了。

\n

原生表单控件

\n

所有的原生表单控件，比如「普通 input、checkbox、radio、textarea、select」都可以直接进行绑定。其中，「普通 input 和 textrea」比较简单，将一个字符类型的模型数据与控件绑定就行了，而对于「checkbox 和 radio」 有多种不同的绑定形式。

\n

将「checkbox 或 radio」绑定到一个 boolean 值，此时会将 checkbox 或 radio 的 checked 属性和模型数据建立绑定，checked 反应了 boolean 变量的值，参考如下示例

\n
@model({ selected:false })\n@binding\nclass App extends React.Component {\n  render(){\n    return <div>\n      <input type=\"checkbox\" data-bind=\"selected\"/>\n      <input type=\"radio\" data-bind=\"selected\"/>\n    </div>;\n  }\n}\n
\n

如上示例通过 this.model.selected 就能拿到当前 checkbox 或 radio 的选中状态。

\n

将 checkbox 绑定到一个「数组」，通常是多个 checkbox 绑定同一个数组变量上，此时和数据建立绑定的是 checkbox 的 value，数据中会包含当前选中的 checkbox 的 value，如下

\n
@model({ selected:[] })\n@binding\nclass App extends React.Component {\n  render(){\n    return <div>\n      <input type=\"checkbox\" data-bind=\"selected\" value=\"1\"/>\n      <input type=\"checkbox\" data-bind=\"selected\" value=\"2\"/>\n    </div>;\n  }\n}\n
\n

如上示例，通过 this.selected 就能知道当前有哪些 checkbox 被选中了，并拿到所有选中的 value

\n

将多个 radio 绑定我到一个「字符类型的变量」，此时和数据建立绑定的是 raido 的 value，因为 radio 是单选的，所以对应的数据是当前选中的 radio 的 value，如下

\n
@model({ selected:'' })\n@binding\nclass App extends React.Component {\n  render(){\n    return <div>\n      <input type=\"radio\" data-bind=\"selected\" value=\"1\"/>\n      <input type=\"radio\" data-bind=\"selected\" value=\"2\"/>\n    </div>;\n  }\n}\n
\n

通过 this.model.selected 就能拿到当前选中的 radio 的 value

\n

自定义组件

\n

但是对于一些「组件库」中的「部分表单组件」不能直接绑定，因为 Mota 并没有什么依据可以判断这是一个什么组件。所以 Mota 提供了一个名为 bindable 的函数，用将任意组件包装成「可绑定组件」。

\n

bindable 有两种个参数，用于分别指定「原始组件」和「包装选项」

\n
//可以这样\nconst MyComponent = bindable(opts, Component);\n//也可这样\nconst MyCompoent = bindable(Component, opts);\n
\n

关建是 bindable 需要的 opts，通过 opts 我们可以造诉 Mota 如何绑定这个组件，opts 中有两个重要的成员，它的结构如下

\n
{\n  value: ['value 对应的属性名'],\n  event: ['value 改变的事件名']\n}\n
\n

所以，我们可以这样包装一个自定义文本输入框

\n
const MyInput = bindable(Input,{\n  value: ['value'],\n  event: ['onChange']\n});\n
\n

对这种「value 不需要转换，change 能通过 event 或 event.target.value 拿到值」的组件，通过如上的代码就能完成包装了。

\n

对于有 onChange 和 value 的这类文本输入组件，因为 opts 的默认值就是

\n
{\n  value: ['value'],\n  event: ['onChange']\n}\n
\n

所以，可以更简单，这样就行，

\n
const MyInput = bindable(Input);\n
\n

而对于 checkbox 和 radio 来讲，如上边讲到的它「根据不同的数据型有不同的绑定形式」，这就需要指定处理函数了，如下

\n
const radioOpts = {\n  prop: ['checked', (ctx, props) => {\n    const mValue = ctx.getValue();\n    if (typeof mValue == 'boolean') {\n      return !!mValue;\n    } else {\n      return mValue == props.value;\n    }\n  }],\n  event: ['onChange', (ctx, event) => {\n    const { value, checked } = event.target;\n    const mValue = ctx.getValue();\n    if (typeof mValue == 'boolean') {\n      ctx.setValue(checked);\n    } else if (checked) ctx.setValue(value);\n  }]\n};\n
\n

通过 prop 的第二个值，能指定「属性处理函数」，event 的第二个值能指取「事件处理函数」，处理函数的 ctx 是个特殊的对象

\n
    \n
  • ctx.getValue 能获取「当前绑定的模型数据」
    • \n
  • ctx.setValue 能设置「当前绑定的模型数据」
    • \n
\n

上边是 radio 的配置，首先，在「属性处理函数」中通过绑定的「模型数据的类型」决定 checked 最终的状态是什么，并在函数中返回。再次，在「事件处理函数」中通过绑定的「模型数据的类型」决定将什么值回写到模型中。

\n

通过「属性处理函数」和「事件处理函数」几乎就能将任意的自定义组件转换为「可绑定组件」了。

\n

另外，对于常见的 CheckBox 和 Radio 类型的组件 Mota 也提供了内建的 opts 配置支持，如果一个自定义组件拥有和「原生 checkbox 一致的属性和事件模型」，那边可以直接用简单的方式去包装，如下

\n
const MyCheckBox = bindable('checkbox',CheckBox);\nconst MyRadio = bindable('radio',Radio);\n
\n

好了，关于绑定就这些了。

\n"},{"group":"guide","name":"use_model","title":"使用 Hook API","index":7,"source":"# 使用 Hook API\n\n### 简单介绍\n在 React 发布包含 `Hooks` 的 `alpah` 版后，Mota 也在 `next` 版本中新增支持了 Hook 风格的 API，随着 React `v16.8` 版本的发布带来了稳定版的 `Hooks` 支持。\n\n目前，Mota \b已经在稳定版中，提供了 `Hook API` 的支持，利用 React 的 `Hooks` 可以让你在不编写类的情况下使用 `state` 和 React 的其他功能。而使用 Mota 极少的 `Hook API` 将给应用带来 Hook 风格可响应的全局状态管理支持。\n\n### 基本用法\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\n\nfunction App(){\n //通过 useModel 拿到一个可响应的 model\n const model = useModel({ count:0 });\n //定义累加按钮事件\n const onClick = useCallback(()=>model.count++);\n //--\n return
\n
{model.count}
\n \n
;\n}\n\nrender(, document.getElementId('root'));\n```\n\n仅有一个新增 API `useModel`，通过 `useModel` 可在一个 `Function Component` 中使用 `model`，如同在 `Class Component` 中的 `@model`，此时的 `model` 依然是可响应的，执行时会对组件进行「依赖收集」，当操作 `model` 的成员时（比如 `model.count=1` 的赋值操作），Mota 会自动发现组件依赖的数据发生了变化并通知组件进行更新。\n\n### 进阶说明\n\n在基本用法中提到了一个关键词「依赖收集」，通过 `useModel` 拿到了可响应的 `model`，默认情况下只有被组件依赖的模型数据发生了变化组件才会更新，比如下边的示例代码中，只有在 `model.a` 发生变化时，组件才会重新渲染。\n\n\n```js\nfunction Demo(){\n const model = useModel({ a:0, b:1 });\n ...\n return
{model.a}
\n}\n```\n\n实际开发过程中有时「组件依赖了模型上的某个对象，但希望这个对象的子成员发生变化时，组件也要重新渲染」\n\n```js\nfunction Demo(){\n const { info } = useModel({ info: { name: 'test'} });\n ...\n return \n}\n```\n\n因为对于 `Demo` 来说只依赖了 `info`，而 `info` 的引用是一直没有变化的，所以在 `info.name` 发生变化时 `Demo` 并不会重新渲染。那这样 `Info` 组件会一直显示旧的数据。\n\n如何处理这个问题？\n\n一个方法是让 `Info` 也通过 `useModel` 有自已的 `model`，那 `Info` 的依赖会被独立解析，比如\n\n```js\nfunction Info(props){\n const info = useModel(props.data);\n return
{info.name}
\n}\n```\n\n这个虽然 `Demo` 不会重新渲染，但 Mota 会发现 `Info` 依赖了 `info.name`，但发现数据变化时，`Info` 会自动更新。\n\n还有一个方法是，在更新 `info.name` 时换一个写法\n\n```js\n//通常的直接给 name 赋值\nmodel.info.name = 'test';\n//如下的给 info 赋值的写法，会让 Demo 发现 info 的变化\nmodel.info = {...model.info, name: 'test'};\n```\n\n除了上述的两个方法，还有一个方法就是通过 `useModel` 的第二个参数显示的声明额外的依赖，第二个参数可是一个数组，数组中是显式声明的依赖，格式为子成员的路径，如下\n\n```js\nfunction Demo(){\n const { info } = useModel({ \n info: { name: 'test'} \n }, ['info.name']);\n ...\n return \n}\n```\n\n但有时时模型数据是一个数组，我们无法直接指定每个子元素的路径，这时第二个参数还可以是一个函数，函数的参数是「变化的模型数据的路径」，可参函数中返回 `boolean` 值决定是否需要更新组件，如下\n\n```js\nfunction Demo(){\n const { info } = useModel({ \n info: [{name: 'test1'}] \n }, p=> p.endsWith('.name'));\n ...\n return \n}\n```\n\n示例中通过用 `endsWith` 路径是不是 `*.name` 结尾的决定要不要更新，当然也可以用更多的判断方法决定要不要更新。","filename":"markdowns/use_model.md","root":"/Users/Houfeng/my/dev/mota","result":"

使用 Hook API

\n

简单介绍

\n

在 React 发布包含 Hooks 的 alpah 版后，Mota 也在 next 版本中新增支持了 Hook 风格的 API，随着 React v16.8 版本的发布带来了稳定版的 Hooks 支持。

\n

目前，Mota \b已经在稳定版中，提供了 Hook API 的支持，利用 React 的 Hooks 可以让你在不编写类的情况下使用 state 和 React 的其他功能。而使用 Mota 极少的 Hook API 将给应用带来 Hook 风格可响应的全局状态管理支持。

\n

基本用法

\n
import React from 'react';\nimport { render } from 'react-dom';\n\nfunction App(){\n  //通过 useModel 拿到一个可响应的 model\n  const model = useModel({ count:0 });\n  //定义累加按钮事件\n  const onClick = useCallback(()=>model.count++);\n  //--\n  return <div>\n    <div>{model.count}</div>\n    <button onClick={onClick}>click me</button>\n  </div>;\n}\n\nrender(<App/>, document.getElementId('root'));\n
\n

仅有一个新增 API useModel，通过 useModel 可在一个 Function Component 中使用 model，如同在 Class Component 中的 @model，此时的 model 依然是可响应的，执行时会对组件进行「依赖收集」，当操作 model 的成员时（比如 model.count=1 的赋值操作），Mota 会自动发现组件依赖的数据发生了变化并通知组件进行更新。

\n

进阶说明

\n

在基本用法中提到了一个关键词「依赖收集」，通过 useModel 拿到了可响应的 model，默认情况下只有被组件依赖的模型数据发生了变化组件才会更新，比如下边的示例代码中，只有在 model.a 发生变化时，组件才会重新渲染。

\n
function Demo(){\n  const model = useModel({ a:0, b:1 });\n  ...\n  return <div>{model.a}</div>\n}\n
\n

实际开发过程中有时「组件依赖了模型上的某个对象，但希望这个对象的子成员发生变化时，组件也要重新渲染」

\n
function Demo(){\n  const { info } = useModel({ info: { name: 'test'} });\n  ...\n  return <Info data={info}/>\n}\n
\n

因为对于 Demo 来说只依赖了 info，而 info 的引用是一直没有变化的，所以在 info.name 发生变化时 Demo 并不会重新渲染。那这样 Info 组件会一直显示旧的数据。

\n

如何处理这个问题？

\n

一个方法是让 Info 也通过 useModel 有自已的 model，那 Info 的依赖会被独立解析，比如

\n
function Info(props){\n  const info = useModel(props.data);\n  return <div>{info.name}</div>\n}\n
\n

这个虽然 Demo 不会重新渲染，但 Mota 会发现 Info 依赖了 info.name，但发现数据变化时，Info 会自动更新。

\n

还有一个方法是，在更新 info.name 时换一个写法

\n
//通常的直接给 name 赋值\nmodel.info.name = 'test';\n//如下的给 info 赋值的写法，会让 Demo 发现 info 的变化\nmodel.info = {...model.info, name: 'test'};\n
\n

除了上述的两个方法，还有一个方法就是通过 useModel 的第二个参数显示的声明额外的依赖，第二个参数可是一个数组，数组中是显式声明的依赖，格式为子成员的路径，如下

\n
function Demo(){\n  const { info } = useModel({ \n    info: { name: 'test'} \n  }, ['info.name']);\n  ...\n  return <Info data={info}/>\n}\n
\n

但有时时模型数据是一个数组，我们无法直接指定每个子元素的路径，这时第二个参数还可以是一个函数，函数的参数是「变化的模型数据的路径」，可参函数中返回 boolean 值决定是否需要更新组件，如下

\n
function Demo(){\n  const { info } = useModel({ \n    info: [{name: 'test1'}] \n  }, p=> p.endsWith('.name'));\n  ...\n  return <Info data={info}/>\n}\n
\n

示例中通过用 endsWith 路径是不是 *.name 结尾的决定要不要更新，当然也可以用更多的判断方法决定要不要更新。

\n"},{"group":"guide","name":"hook_model","title":"面向 Hook 的模型","index":8,"source":"# 面向 Hook 的模型\n\n### 一些说明\n\n针对 Mota 的 `useModel` 的模型本质上和针对 `@model` 的模型并无本质区别，用以往的风格编写的「模型类」或「单例的普通 Object」，除了能用于 `@model` 也是能用于 `useModel` 的。\n\n既然用了 `Hook API`，是不是可在编写模型也避免再写「类」或「单例的 Object」？为此 `useModel` 还提供了用 `ES Module` 作为模型的支持，如用其他风格的模型一样，`ES Module` 风格的模型也不需要引用额外的依赖，仅用 `ES` 原生语法即可。\n\n### 用 ES Module 编写模型\n\n通过 `ES Module` 直接作为 `model` 的优点时「简单、直接」，同时由于为了保证「可响应」不被破坏，需要一点点约束，就是「必须导出一个 state 对象」，如下\n\n```js\nexport const state = {\n name: 'test'\n}\n\nexport function setName(name){\n state.name = name\n}\n```\n\n上边的代码是一个最简单的可当作 `model` 的 `ES Module`，一个包含「state 和一组件函数」的 `ES Module` 就是一个可被 `useModel` 使用的 `model`，参考如下代码\n\n```js\nimport * as demo from './models/demo';\n\nfunction App(){\n const { name } = useModel(demo);\n return
{name}
;\n}\n```\n\n注意：必须 export 一个 state 的约束只针对于 `ES Module`，用 `class` 或 `object` 的风格编写的 `model` 无任何约束。","filename":"markdowns/hook_model.md","root":"/Users/Houfeng/my/dev/mota","result":"

面向 Hook 的模型

\n

一些说明

\n

针对 Mota 的 useModel 的模型本质上和针对 @model 的模型并无本质区别，用以往的风格编写的「模型类」或「单例的普通 Object」，除了能用于 @model 也是能用于 useModel 的。

\n

既然用了 Hook API，是不是可在编写模型也避免再写「类」或「单例的 Object」？为此 useModel 还提供了用 ES Module 作为模型的支持，如用其他风格的模型一样，ES Module 风格的模型也不需要引用额外的依赖，仅用 ES 原生语法即可。

\n

用 ES Module 编写模型

\n

通过 ES Module 直接作为 model 的优点时「简单、直接」，同时由于为了保证「可响应」不被破坏，需要一点点约束，就是「必须导出一个 state 对象」，如下

\n
export const state = {\n  name: 'test'\n}\n\nexport function setName(name){\n  state.name = name\n}\n
\n

上边的代码是一个最简单的可当作 model 的 ES Module，一个包含「state 和一组件函数」的 ES Module 就是一个可被 useModel 使用的 model，参考如下代码

\n
import * as demo from './models/demo';\n\nfunction App(){\n  const { name } = useModel(demo);\n  return <div>{name}</div>;\n}\n
\n

注意：必须 export 一个 state 的约束只针对于 ES Module，用 class 或 object 的风格编写的 model 无任何约束。

\n"},{"group":"guide","name":"typescript","title":"在 TS 中使用","index":8,"source":"# 在 TS 中使用 Mota\n\nMota 的 `Package` 中自带了「类型定义文件」，无论使用 `Class + Decorator` 风格的 API 或使用 `Hooks` 风格的 API，都能愉快的使用 TypeScript，下边有两个小提示。\n\n### 提示一：使用 @model \n\n在通过 `@model` 为组件关联了一个 `model` 后，需要声明 `this.model` 的类型，参考如下代码\n\n```js\nimport * as React from \"react\";\nimport { model, watch, mapping } from \"mota\";\nimport { DemoModel } from \"./DemoModel\";\n\n@model(DemoModel)\nexport class Demo extends React.Component {\n\n //需要声明 model 的类型\n model: DemoModel;\n\n render() {\n //便能让 this.model 具备完整的类型提示了\n const { name } = this.model;\n return
\n {name} \n
;\n }\n}\n```\n\n### 提示一：使用 useModel\n\n完整的 `useModel` 的定义为 `useModel(model:T)=>T`，但使用 `useModel` 时一般不需做特别的声明，默认情况下 `TS` 就能完成类型推导\n\n```js\nimport * as React from \"react\";\nimport { useModel } from \"mota\";\nimport { DemoModel } from \"./DemoModel\";\n\nexport function Demo {\n const { name } = useModel(DemoModel);\n return
\n {name} \n
;\n}\n```","filename":"markdowns/typescript.md","root":"/Users/Houfeng/my/dev/mota","result":"

在 TS 中使用 Mota

\n

Mota 的 Package 中自带了「类型定义文件」，无论使用 Class + Decorator 风格的 API 或使用 Hooks 风格的 API，都能愉快的使用 TypeScript，下边有两个小提示。

\n

提示一：使用 @model

\n

在通过 @model 为组件关联了一个 model 后，需要声明 this.model 的类型，参考如下代码

\n
import * as React from \"react\";\nimport { model, watch, mapping } from \"mota\";\nimport { DemoModel } from \"./DemoModel\";\n\n@model(DemoModel)\nexport class Demo extends React.Component {\n\n  //需要声明 model 的类型\n  model: DemoModel;\n\n  render() {\n    //便能让 this.model 具备完整的类型提示了\n    const { name } = this.model;\n    return <div className=\"demo\">  \n      {name}  \n    </div>;\n  }\n}\n
\n

提示一：使用 useModel

\n

完整的 useModel 的定义为 useModel<T>(model:T)=>T，但使用 useModel 时一般不需做特别的声明，默认情况下 TS 就能完成类型推导

\n
import * as React from \"react\";\nimport { useModel } from \"mota\";\nimport { DemoModel } from \"./DemoModel\";\n\nexport function Demo {\n  const { name } = useModel(DemoModel);\n  return <div className=\"demo\">  \n    {name}  \n  </div>;\n}\n
\n"}]}],"links":[{"text":"状态管理 (Mota)","url":"//houfeng.net/mota/"},{"text":"数据验证 (Validation)","url":"//houfeng.net/mota-validation/"},{"text":"表单组件 (Form)","url":"//houfeng.net/mota-form/"},{"text":"源码 (GitHub)","url":"//github.com/Houfeng/mota"}]}],"plugins":[{"name":"doczilla-place","options":{}},{"name":"doczilla-include","options":{}},{"name":"doczilla-container","options":{}},{"name":"doczilla-highlight","options":{}},{"name":"doczilla-details","options":{}},{"name":"doczilla-card","options":{}},{"name":"doczilla-anchor","options":{}}],"mode":"static","baseUri":"","extname":".html"}; \ No newline at end of file +window.DOC_DATA={"locales":[{"name":"zh","text":"中文 (CN)","title":"Mota","groups":[{"name":"guide","text":"使用指南","docs":[{"group":"guide","name":"quick","title":"快速开始","index":1,"source":"# Mota\n\n## 简述 \n\nReact 是一个「视图层」的 UI 框架，以常见的 MVC 来讲 React 仅是 View，而我们在编写应用时，通常还需要关注更加重要的 model，对于 React 来讲，我们常常需要一个「状态管理」库。然而，目前大多数针对 React 的状态管理库都是「强依赖」过多的侵入本应该独立的业务模型中，导致「业务逻辑」对应的代码并不能轻易在其它地方重用，往往这些框架还具有「强排它性」，但是「业务模型」应该是没有过多依赖，应该是无关框架的，它应该随时可以被用在任何合适的 JavaScript 环境中，使用 mota 你可以用原生的普通的 JavaScript 代码编写你的「业务模型」，并让你的「业务模型」在不同框架、不同运行环境下重用更为容易。\n\nMota 是一个响应式的 React 应用状态管理库，基于 Mota 你可以用单纯无依赖的 JavaScript 为应用编写「业务模型」，并轻易的将「业务模型」关联到 React 应用中。\n\n## 示例\n\n[在线 TodoList 示例](http://houfeng.net/dn-template-mota/example/)\n([示例源码](https://github.com/Houfeng/dn-template-mota))\n\n\n\n## 安装\n\n通过 npm 安装，如下\n```sh\n$ npm i mota --save \n```\n\n或通过 `dawn` 脚手脚加创建工程，如下\n\n```sh\n$ mkdir your_path\n$ cd your_path\n$ dn init -t mota\n$ dn dev\n```\n\n需要先安装 dawn（[Dawn 安装及使用文档](https://alibaba.github.io/dawn/docs/)）\n\n## 结构\n\n一个 `mota` 工程的通常结构如下\n\n```sh\n.\n├── README.md\n├── package.json\n└── src\n ├── assets\n │   ├── common.less\n │   ├── favicon.ico\n │   └── index.html\n ├── components\n │   ├── todoApp.js\n │   └── todoItem.js\n ├── index.js\n └── models\n ├── TodoItem.js\n ├── TodoList.js\n └── index.js\n```\n\n## 文档\n- [快速开始](http://houfeng.net/mota/#!/zh/guide/quick)\n- [编写业务模型](http://houfeng.net/mota/#!/zh/guide/model)\n- [将组件属性映射到模型](http://houfeng.net/mota/#!/zh/guide/mapping)\n- [自执行函数](http://houfeng.net/mota/#!/zh/guide/autorun)\n- [监听模型变化](http://houfeng.net/mota/#!/zh/guide/watch)\n- [将模型数据与表单绑定](http://houfeng.net/mota/#!/zh/guide/binding)\n\n## 链接\n- [版本发布日志](https://github.com/Houfeng/mota/releases)\n- [MIT 开源协议](https://tldrlegal.com/license/mit-license)","filename":"markdowns/quick.md","root":"/Users/Houfeng/my/dev/mota","result":"

Mota

\n

简述

\n

React 是一个「视图层」的 UI 框架，以常见的 MVC 来讲 React 仅是 View，而我们在编写应用时，通常还需要关注更加重要的 model，对于 React 来讲，我们常常需要一个「状态管理」库。然而，目前大多数针对 React 的状态管理库都是「强依赖」过多的侵入本应该独立的业务模型中，导致「业务逻辑」对应的代码并不能轻易在其它地方重用，往往这些框架还具有「强排它性」，但是「业务模型」应该是没有过多依赖，应该是无关框架的，它应该随时可以被用在任何合适的 JavaScript 环境中，使用 mota 你可以用原生的普通的 JavaScript 代码编写你的「业务模型」，并让你的「业务模型」在不同框架、不同运行环境下重用更为容易。

\n

Mota 是一个响应式的 React 应用状态管理库，基于 Mota 你可以用单纯无依赖的 JavaScript 为应用编写「业务模型」，并轻易的将「业务模型」关联到 React 应用中。

\n

示例

\n

在线 TodoList 示例\n(示例源码)

\n\n

安装

\n

通过 npm 安装，如下

\n
$ npm i mota --save \n
\n

或通过 dawn 脚手脚加创建工程，如下

\n
$ mkdir your_path\n$ cd your_path\n$ dn init -t mota\n$ dn dev\n
\n

需要先安装 dawn（Dawn 安装及使用文档）

\n

结构

\n

一个 mota 工程的通常结构如下

\n
.\n├── README.md\n├── package.json\n└── src\n    ├── assets\n    │   ├── common.less\n    │   ├── favicon.ico\n    │   └── index.html\n    ├── components\n    │   ├── todoApp.js\n    │   └── todoItem.js\n    ├── index.js\n    └── models\n        ├── TodoItem.js\n        ├── TodoList.js\n        └── index.js\n
\n

文档

\n\n

链接

\n\n"},{"group":"guide","name":"model","title":"编写业务模型","index":2,"source":"# 编写业务模型\n\n在你编写模型之前，先放下 React 也放下 Mota，就用单纯的 JavaScript 去编写你的业务模型，或有一个或多个类、或就是几个 Object，依它们应有的、自然的关系去抽像就行了，业务模型不依赖于 UI、也不依赖于某个框架，它易于测试，你可以针对它做单元测试。它易于重用，你可以将它用在合适的地方。最后， Mota 只是出场把它关联到 React。\n\n在 Mota 中「模型」可以是由一个 `class` 或普通的的 `Object`，整个「业务模型层」会由多个 `class` 和多个 `Object` 组成，而编写模型所需要的知识就是 JavaScript 固有的编程的知识。\n\n如下示例通过编写一个名为 `User` 的 `class` 创建了一个「用户模型」\n\n```js\nexport default class User {\n firstName = 'Jack';\n lastName = 'Hou';\n get fullName(){\n reutrn `${this.firstName} ${this.lastName}`;\n }\n}\n```\n\n也可以是一个 `Object`，通常这个模型需要是「单例」时，可采用这种方式，如下\n\n```js\nexport default {\n firstName: 'Jack',\n lastName: 'Hou',\n get fullName(){\n reutrn `${this.firstName} ${this.lastName}`;\n }\n};\n```\n\n在「业务模型」编写完成后，可以通过 `@model` 将某个「类」或「类的实例」关联到指定组件，关联后便可以在组件中使用 `this.model` 访问「模型的成员变量或方法」了，Mota 还会自动「收集组件依赖」，在组件「依赖的模型数据」发生变化时，自动响应变化并「驱动组件重新渲染」，如下\n\n```js\nimport { model,binding } from 'mota';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport User from './models/user';\n\n@model(User)\nclass App extends React.Component {\n\n onChange(field,event){\n this.model[field] = event.target.value;\n }\n\n render(){\n return
\n

{this.model.fullName}

\n

\n \n
\n \n

\n
;\n }\n}\n\nReactDOM.render(, mountNode);\n```\n\n值得注意的是，在使用 `@model` 时如果传入的是一个 `class` 最终每个组件实例都会自动创建一个 `独立的实例`，这样带来的好处是「当一个页面中有同一个组件的多个实例时，不会相互影响」。","filename":"markdowns/model.md","root":"/Users/Houfeng/my/dev/mota","result":"

编写业务模型

\n

在你编写模型之前，先放下 React 也放下 Mota，就用单纯的 JavaScript 去编写你的业务模型，或有一个或多个类、或就是几个 Object，依它们应有的、自然的关系去抽像就行了，业务模型不依赖于 UI、也不依赖于某个框架，它易于测试，你可以针对它做单元测试。它易于重用，你可以将它用在合适的地方。最后， Mota 只是出场把它关联到 React。

\n

在 Mota 中「模型」可以是由一个 class 或普通的的 Object，整个「业务模型层」会由多个 class 和多个 Object 组成，而编写模型所需要的知识就是 JavaScript 固有的编程的知识。

\n

如下示例通过编写一个名为 User 的 class 创建了一个「用户模型」

\n
export default class User {\n  firstName = 'Jack';\n  lastName = 'Hou';\n  get fullName(){\n    reutrn `${this.firstName} ${this.lastName}`;\n  }\n}\n
\n

也可以是一个 Object，通常这个模型需要是「单例」时，可采用这种方式，如下

\n
export default {\n  firstName: 'Jack',\n  lastName: 'Hou',\n  get fullName(){\n    reutrn `${this.firstName} ${this.lastName}`;\n  }\n};\n
\n

在「业务模型」编写完成后，可以通过 @model 将某个「类」或「类的实例」关联到指定组件，关联后便可以在组件中使用 this.model 访问「模型的成员变量或方法」了，Mota 还会自动「收集组件依赖」，在组件「依赖的模型数据」发生变化时，自动响应变化并「驱动组件重新渲染」，如下

\n
import { model,binding } from 'mota';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport User from './models/user';\n\n@model(User)\nclass App extends React.Component {\n\n  onChange(field,event){\n    this.model[field] = event.target.value;\n  }\n\n  render(){\n    return <div>\n      <p>{this.model.fullName}</p>\n      <p>\n        <input onChange={this.onChange.bind(this,'firstName')}/>\n        <br/>\n        <input onChange={this.onChange.bind(this,'lastName')}/>\n      </p>\n    </div>;\n  }\n}\n\nReactDOM.render(<App/>, mountNode);\n
\n

值得注意的是，在使用 @model 时如果传入的是一个 class 最终每个组件实例都会自动创建一个 独立的实例，这样带来的好处是「当一个页面中有同一个组件的多个实例时，不会相互影响」。

\n"},{"group":"guide","name":"mapping","title":"属性映射","index":3,"source":"# 属性映射\n\n在 React 中通常会将应用折分为多个组件重用它们，并在用时传递给它「属性」，Mota 提供了将「组件属性」映射到「模型数据」的能力，基于 `model` 编程会让「视图层」的编写更为方例，专注于 UI 的呈现，如下\n\n```js\n@model({ value: 'demo' })\n@mapping(['value'])\nclass Demo extends React.Component {\n render () {\n return
{this.model.value}
;\n }\n}\n```\n\n上边的代码通过 `mapping` 将 `Demo` 这个组件的 `value` 属性映射到了 `model.value` 上，在组件的属性 `value` 发生变化时，会自动同步到 `model.value` 中。\n\n通过一个 `map` 进行映射，还可以让「组件属性」和「模型的成员」使用不同名称，如下:\n\n```js\n@model({ value: 'demo' })\n@mapping({ content: 'value' })\nclass Demo extends React.Component {\n render () {\n return
{this.model.value}
;\n }\n}\n```\n\n上边的代码，将组件 demo 的 `content` 属性映射到了 `model.value` 上，那么这个组件就可以这样使用了\n\n```js\nfunction App(){\n return ;\n}\n```\n\n`Demo` 组件的 `content` 属性，将自动被赋值给 `model.value`，如果没有 `mapping`，通常我们就需要在 `componentDidMount` 和 `componentWillReceiveProps` 之类的生命周函数去处理。其实，`mapping` 就像是一个语法糖，使用它将不再需要手动处理 prop->model 的更新了。","filename":"markdowns/mapping.md","root":"/Users/Houfeng/my/dev/mota","result":"

属性映射

\n

在 React 中通常会将应用折分为多个组件重用它们，并在用时传递给它「属性」，Mota 提供了将「组件属性」映射到「模型数据」的能力，基于 model 编程会让「视图层」的编写更为方例，专注于 UI 的呈现，如下

\n
@model({ value: 'demo' })\n@mapping(['value'])\nclass Demo extends React.Component {\n  render () {\n    return <div>{this.model.value}</div>;\n  }\n}\n
\n

上边的代码通过 mapping 将 Demo 这个组件的 value 属性映射到了 model.value 上，在组件的属性 value 发生变化时，会自动同步到 model.value 中。

\n

通过一个 map 进行映射，还可以让「组件属性」和「模型的成员」使用不同名称，如下:

\n
@model({ value: 'demo' })\n@mapping({ content: 'value' })\nclass Demo extends React.Component {\n  render () {\n    return <div>{this.model.value}</div>;\n  }\n}\n
\n

上边的代码，将组件 demo 的 content 属性映射到了 model.value 上，那么这个组件就可以这样使用了

\n
function App(){\n  return <Demo content={'yyyy'} />;\n}\n
\n

Demo 组件的 content 属性，将自动被赋值给 model.value，如果没有 mapping，通常我们就需要在 componentDidMount 和 componentWillReceiveProps 之类的生命周函数去处理。其实，mapping 就像是一个语法糖，使用它将不再需要手动处理 prop->model 的更新了。

\n"},{"group":"guide","name":"autorun","title":"自执行函数","index":4,"source":"# 自执行函数\n\nMota 中提供了一个 `autorun` 函数，可用于装饰 React 组件的成员方法，被装饰的「成员方法」将会在组件挂载后自动执行一次，Mota 将「收集方法中依赖的模型数据」，在依赖的模型数据发生变化时会「自动重新执行」对应的组件方法。\n\n示例\n\n```js\nimport { Component } from 'react';\nimport { model, autorun } from 'mota';\nimport DemoModel from './models/demo';\n\n@model(DemoModel)\nexport default Demo extends Component {\n\n @autorun\n test() {\n console.log(this.model.name);\n }\n\n}\n```\n\n上边的示例代码中，组件在被挂载后将会自动执行 `test` 方法，同时 mota 会发现方法中依赖了 `model.name`，那么，在 `model.name` 发生变化时，就会重新执行 `test` 方法。","filename":"markdowns/autorun.md","root":"/Users/Houfeng/my/dev/mota","result":"

自执行函数

\n

Mota 中提供了一个 autorun 函数，可用于装饰 React 组件的成员方法，被装饰的「成员方法」将会在组件挂载后自动执行一次，Mota 将「收集方法中依赖的模型数据」，在依赖的模型数据发生变化时会「自动重新执行」对应的组件方法。

\n

示例

\n
import { Component } from 'react';\nimport { model, autorun } from 'mota';\nimport DemoModel from './models/demo';\n\n@model(DemoModel)\nexport default Demo extends Component {\n\n  @autorun\n  test() {\n    console.log(this.model.name);\n  }\n\n}\n
\n

上边的示例代码中，组件在被挂载后将会自动执行 test 方法，同时 mota 会发现方法中依赖了 model.name，那么，在 model.name 发生变化时，就会重新执行 test 方法。

\n"},{"group":"guide","name":"watch","title":"监听模型变化","index":5,"source":"# 监听模型变化\n\n\nMota 中提供了一个 `watch` 函数，可用于装饰 React 组件的成员方法，`watch` 可以指定要观察的「模型数据」，在模型数据发变化时，就会自动执行「被装饰的组件方法」，`watch` 还可以像 `autorun` 一样自动执行一次，但它和 `autorun` 还是不尽相同，主要有如下区别\n\n- `autorun` 会自动收集依赖，而 `watch` 不会关心组件方法中有何依赖，需要手动指定依赖的模型数据\n- `watch` 默认不会「自动执行」，需显式的指定「立即执行参数为 true」，才会自动执行首次。\n- `autorun` 依赖的是「模型数据」本身，而 `watch` 依赖的是「计算函数」每次的「计算结果」\n \n示例\n\n```js\nimport { Component } from 'react';\nimport { model, autorun } from 'mota';\nimport DemoModel from './models/demo';\n\n@model(DemoModel)\nexport default Demo extends Component {\n\n @watch(model=>model.name)\n test() {\n console.log('name 发生了变化');\n }\n\n}\n```\n\n上边的代码，通过 `watch` 装饰了 `test` 方法，并指定了观察的模型数据 `model.name`，那么每当 `model.name` 发生变\b化时，都会打印 `name 发生了变化`.\n\n`watch` 是否重新执行，取决于 `watch` 的作为第一个参数传给它的「计算函数」的计算结果，每当依赖的模型数据发生变化时 `watch` 都会重执行计算函数，当计算结果有变化时，才会执行被装饰的「组件方法」，示例\n\n```js\nexport default Demo extends Component {\n\n @watch(model=>model.name+model.age)\n test() {\n console.log('name 发生变化');\n }\n\n}\n```\n\n有时，我们希望 `watch` 能首先自动执行一次，那么可通过向第二个参数传一个 `true` 声明这个 `watch` 要自动执行一次。\n\n```js\nexport default Demo extends Component {\n\n @watch(model=>model.name,true)\n test() {\n console.log('name 发生变化');\n }\n\n}\n```\n\n上边的 `test` 方法，将会在「组件挂载之后自动执行」，之后在 `model.name` 发生变化时也将自动重新执行。","filename":"markdowns/watch.md","root":"/Users/Houfeng/my/dev/mota","result":"

监听模型变化

\n

Mota 中提供了一个 watch 函数，可用于装饰 React 组件的成员方法，watch 可以指定要观察的「模型数据」，在模型数据发变化时，就会自动执行「被装饰的组件方法」，watch 还可以像 autorun 一样自动执行一次，但它和 autorun 还是不尽相同，主要有如下区别

\n
    \n
  • autorun 会自动收集依赖，而 watch 不会关心组件方法中有何依赖，需要手动指定依赖的模型数据
    • \n
  • watch 默认不会「自动执行」，需显式的指定「立即执行参数为 true」，才会自动执行首次。
    • \n
  • autorun 依赖的是「模型数据」本身，而 watch 依赖的是「计算函数」每次的「计算结果」
    • \n
\n

示例

\n
import { Component } from 'react';\nimport { model, autorun } from 'mota';\nimport DemoModel from './models/demo';\n\n@model(DemoModel)\nexport default Demo extends Component {\n\n  @watch(model=>model.name)\n  test() {\n    console.log('name 发生了变化');\n  }\n\n}\n
\n

上边的代码，通过 watch 装饰了 test 方法，并指定了观察的模型数据 model.name，那么每当 model.name 发生变\b化时，都会打印 name 发生了变化.

\n

watch 是否重新执行，取决于 watch 的作为第一个参数传给它的「计算函数」的计算结果，每当依赖的模型数据发生变化时 watch 都会重执行计算函数，当计算结果有变化时，才会执行被装饰的「组件方法」，示例

\n
export default Demo extends Component {\n\n  @watch(model=>model.name+model.age)\n  test() {\n    console.log('name 发生变化');\n  }\n\n}\n
\n

有时，我们希望 watch 能首先自动执行一次，那么可通过向第二个参数传一个 true 声明这个 watch 要自动执行一次。

\n
export default Demo extends Component {\n\n  @watch(model=>model.name,true)\n  test() {\n    console.log('name 发生变化');\n  }\n\n}\n
\n

上边的 test 方法，将会在「组件挂载之后自动执行」，之后在 model.name 发生变化时也将自动重新执行。

\n"},{"group":"guide","name":"binding","title":"数据绑定","index":6,"source":"# 数据绑定\n\n\n### 基本用法\n\n不要惊诧，就是「双向绑定」。Mota 不排斥「双向绑定」，使用 Mota 能够实现类似 `ng` 或 `vue` 的绑定效果。还是前边小节中的模型，我们来稍微改动一下组件的代码\n\n```js\nimport { model,binding } from 'mota';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport User from './models/user';\n\n@model(User)\n@binding\nclass App extends React.Component {\n render(){\n const { fullName, firstName, popup } = this.model;\n return
\n

{fullName}

\n

\n \n \n

\n
;\n }\n}\nReactDOM.render(, mountNode);\n```\n\n~~其中的「关键」就是 `@binding`，使用 `@binding` 后~~ (>=1.2.0 的版本将会自动处理，不必显示的启用)，组件便具备了「双向绑定」的能力，在 `jsx` 中便可以通过名为 `data-bind` 的自定义 `attribute` 进行绑定了，`data-bind` 的值是一个「绑定表达式字符串」，绑定表达式执行的 `scope` 是 `model` 而不是 `this`，也就是只能与 `模型的成员` 进行绑定。\n\n会有一种情况是当要绑定的数据是一个循环变量时，「绑定表达式」写起会较麻烦也稍显长，比如\n\n```js\n@model(userModel)\n@binding\nclass App extends React.Component {\n render(){\n const { userList } = this.model;\n return
    \n {userList.map((user,index)=>(\n
  • \n \n {user.name}\n
    • \n ))}\n
;\n }\n}\n```\n\n因为「绑定表达式」的执行 `scope` 默认是 `this.model`，以及「表达式是个字符串」，看一下 `userList[${index}].selected` 这并不友好，为此 Mota 还提供了一个名为 `data-scope` 的 `attribute`，通过它能改变要绑定的 `scope`，参考如下示例\n\n```js\n@model(userModel)\n@binding\nclass App extends React.Component {\n render(){\n const { userList } = this.model;\n return
    \n {userList.map(user=>(\n
  • \n \n {user.name}\n
    • \n ))}\n
;\n }\n}\n```\n\n通过 `data-scope` 将 `input` 的绑定上下文对象声明为当前循环变量 `user`，这样就可以用 `data-bind` 直接绑定到对应 `user` 的属性上了。\n\n### 原生表单控件\n\n所有的原生表单控件，比如「普通 input、checkbox、radio、textarea、select」都可以直接进行绑定。其中，「普通 input 和 textrea」比较简单，将一个字符类型的模型数据与控件绑定就行了，而对于「checkbox 和 radio」 有多种不同的绑定形式。\n\n将「checkbox 或 radio」绑定到一个 `boolean` 值，此时会将 checkbox 或 radio 的 `checked` 属性和模型数据建立绑定，`checked` 反应了 `boolean` 变量的值，参考如下示例\n\n```js\n@model({ selected:false })\n@binding\nclass App extends React.Component {\n render(){\n return
\n \n \n
;\n }\n}\n```\n\n如上示例通过 `this.model.selected` 就能拿到当前 checkbox 或 radio 的选中状态。\n\n\n将 checkbox 绑定到一个「数组」，通常是多个 checkbox 绑定同一个数组变量上，此时和数据建立绑定的是 checkbox 的 value，数据中会包含当前选中的 checkbox 的 value，如下\n\n```js\n@model({ selected:[] })\n@binding\nclass App extends React.Component {\n render(){\n return
\n \n \n
;\n }\n}\n```\n\n如上示例，通过 `this.selected` 就能知道当前有哪些 checkbox 被选中了，并拿到所有选中的 value\n\n\n将多个 radio 绑定我到一个「字符类型的变量」，此时和数据建立绑定的是 raido 的 value，因为 radio 是单选的，所以对应的数据是当前选中的 radio 的 value，如下\n\n```js\n@model({ selected:'' })\n@binding\nclass App extends React.Component {\n render(){\n return
\n \n \n
;\n }\n}\n```\n通过 `this.model.selected` 就能拿到当前选中的 radio 的 `value`\n\n\n### 自定义组件\n\n但是对于一些「组件库」中的「部分表单组件」不能直接绑定，因为 Mota 并没有什么依据可以判断这是一个什么组件。所以 Mota 提供了一个名为 `bindable` 的函数，用将任意组件包装成「可绑定组件」。\n\nbindable 有两种个参数，用于分别指定「原始组件」和「包装选项」\n\n```js\n//可以这样\nconst MyComponent = bindable(opts, Component);\n//也可这样\nconst MyCompoent = bindable(Component, opts);\n```\n\n关建是 `bindable` 需要的 `opts`，通过 `opts` 我们可以造诉 Mota 如何绑定这个组件，`opts` 中有两个重要的成员，它的结构如下\n\n```js\n{\n value: ['value 对应的属性名'],\n event: ['value 改变的事件名']\n}\n```\n\n所以，我们可以这样包装一个自定义文本输入框\n\n```js\nconst MyInput = bindable(Input,{\n value: ['value'],\n event: ['onChange']\n});\n```\n\n对这种「value 不需要转换，`change` 能通过 `event` 或 `event.target.value` 拿到值」的组件，通过如上的代码就能完成包装了。\n\n对于有 `onChange` 和 `value` 的这类文本输入组件，因为 opts 的默认值就是\n\n```js\n{\n value: ['value'],\n event: ['onChange']\n}\n```\n\n所以，可以更简单，这样就行，\n```js\nconst MyInput = bindable(Input);\n```\n\n而对于 checkbox 和 radio 来讲，如上边讲到的它「根据不同的数据型有不同的绑定形式」，这就需要指定处理函数了，如下\n\n```js\nconst radioOpts = {\n prop: ['checked', (ctx, props) => {\n const mValue = ctx.getValue();\n if (typeof mValue == 'boolean') {\n return !!mValue;\n } else {\n return mValue == props.value;\n }\n }],\n event: ['onChange', (ctx, event) => {\n const { value, checked } = event.target;\n const mValue = ctx.getValue();\n if (typeof mValue == 'boolean') {\n ctx.setValue(checked);\n } else if (checked) ctx.setValue(value);\n }]\n};\n```\n\n通过 `prop` 的第二个值，能指定「属性处理函数」，`event` 的第二个值能指取「事件处理函数」，处理函数的 `ctx` 是个特殊的对象 \n\n- `ctx.getValue` 能获取「当前绑定的模型数据」\n- `ctx.setValue` 能设置「当前绑定的模型数据」\n\n上边是 `radio` 的配置，首先，在「属性处理函数」中通过绑定的「模型数据的类型」决定 `checked` 最终的状态是什么，并在函数中返回。再次，在「事件处理函数」中通过绑定的「模型数据的类型」决定将什么值回写到模型中。\n\n通过「属性处理函数」和「事件处理函数」几乎就能将任意的自定义组件转换为「可绑定组件」了。\n\n另外，对于常见的 `CheckBox` 和 `Radio` 类型的组件 Mota 也提供了内建的 `opts` 配置支持，如果一个自定义组件拥有和「原生 checkbox 一致的属性和事件模型」，那边可以直接用简单的方式去包装，如下\n\n```js\nconst MyCheckBox = bindable('checkbox',CheckBox);\nconst MyRadio = bindable('radio',Radio);\n```\n\n好了，关于绑定就这些了。","filename":"markdowns/binding.md","root":"/Users/Houfeng/my/dev/mota","result":"

数据绑定

\n

基本用法

\n

不要惊诧，就是「双向绑定」。Mota 不排斥「双向绑定」，使用 Mota 能够实现类似 ng 或 vue 的绑定效果。还是前边小节中的模型，我们来稍微改动一下组件的代码

\n
import { model,binding } from 'mota';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport User from './models/user';\n\n@model(User)\n@binding\nclass App extends React.Component {\n  render(){\n    const { fullName, firstName, popup } = this.model;\n    return <div>\n      <p>{fullName}</p>\n      <p>\n        <input data-bind=\"firstName\"/>\n        <button onClick={popup}> click me </button>\n      </p>\n    </div>;\n  }\n}\nReactDOM.render(<App/>, mountNode);\n
\n

其中的「关键」就是 @binding，使用 @binding 后 (>=1.2.0 的版本将会自动处理，不必显示的启用)，组件便具备了「双向绑定」的能力，在 jsx 中便可以通过名为 data-bind 的自定义 attribute 进行绑定了，data-bind 的值是一个「绑定表达式字符串」，绑定表达式执行的 scope 是 model 而不是 this，也就是只能与 模型的成员 进行绑定。

\n

会有一种情况是当要绑定的数据是一个循环变量时，「绑定表达式」写起会较麻烦也稍显长，比如

\n
@model(userModel)\n@binding\nclass App extends React.Component {\n  render(){\n    const { userList } = this.model;\n    return <ul>\n     {userList.map((user,index)=>(\n       <li key={user.id}>\n         <input type=\"checkobx\" data-bind={`userList[${index}].selected`}>\n         {user.name}\n       </li>\n     ))}\n    </ul>;\n  }\n}\n
\n

因为「绑定表达式」的执行 scope 默认是 this.model，以及「表达式是个字符串」，看一下 userList[${index}].selected 这并不友好，为此 Mota 还提供了一个名为 data-scope 的 attribute，通过它能改变要绑定的 scope，参考如下示例

\n
@model(userModel)\n@binding\nclass App extends React.Component {\n  render(){\n    const { userList } = this.model;\n    return <ul>\n     {userList.map(user=>(\n       <li key={user.id}>\n         <input type=\"checkobx\" data-scope={user} data-bind=\"selected\">\n         {user.name}\n       </li>\n     ))}\n    </ul>;\n  }\n}\n
\n

通过 data-scope 将 input 的绑定上下文对象声明为当前循环变量 user，这样就可以用 data-bind 直接绑定到对应 user 的属性上了。

\n

原生表单控件

\n

所有的原生表单控件，比如「普通 input、checkbox、radio、textarea、select」都可以直接进行绑定。其中，「普通 input 和 textrea」比较简单，将一个字符类型的模型数据与控件绑定就行了，而对于「checkbox 和 radio」 有多种不同的绑定形式。

\n

将「checkbox 或 radio」绑定到一个 boolean 值，此时会将 checkbox 或 radio 的 checked 属性和模型数据建立绑定，checked 反应了 boolean 变量的值，参考如下示例

\n
@model({ selected:false })\n@binding\nclass App extends React.Component {\n  render(){\n    return <div>\n      <input type=\"checkbox\" data-bind=\"selected\"/>\n      <input type=\"radio\" data-bind=\"selected\"/>\n    </div>;\n  }\n}\n
\n

如上示例通过 this.model.selected 就能拿到当前 checkbox 或 radio 的选中状态。

\n

将 checkbox 绑定到一个「数组」，通常是多个 checkbox 绑定同一个数组变量上，此时和数据建立绑定的是 checkbox 的 value，数据中会包含当前选中的 checkbox 的 value，如下

\n
@model({ selected:[] })\n@binding\nclass App extends React.Component {\n  render(){\n    return <div>\n      <input type=\"checkbox\" data-bind=\"selected\" value=\"1\"/>\n      <input type=\"checkbox\" data-bind=\"selected\" value=\"2\"/>\n    </div>;\n  }\n}\n
\n

如上示例，通过 this.selected 就能知道当前有哪些 checkbox 被选中了，并拿到所有选中的 value

\n

将多个 radio 绑定我到一个「字符类型的变量」，此时和数据建立绑定的是 raido 的 value，因为 radio 是单选的，所以对应的数据是当前选中的 radio 的 value，如下

\n
@model({ selected:'' })\n@binding\nclass App extends React.Component {\n  render(){\n    return <div>\n      <input type=\"radio\" data-bind=\"selected\" value=\"1\"/>\n      <input type=\"radio\" data-bind=\"selected\" value=\"2\"/>\n    </div>;\n  }\n}\n
\n

通过 this.model.selected 就能拿到当前选中的 radio 的 value

\n

自定义组件

\n

但是对于一些「组件库」中的「部分表单组件」不能直接绑定，因为 Mota 并没有什么依据可以判断这是一个什么组件。所以 Mota 提供了一个名为 bindable 的函数，用将任意组件包装成「可绑定组件」。

\n

bindable 有两种个参数，用于分别指定「原始组件」和「包装选项」

\n
//可以这样\nconst MyComponent = bindable(opts, Component);\n//也可这样\nconst MyCompoent = bindable(Component, opts);\n
\n

关建是 bindable 需要的 opts，通过 opts 我们可以造诉 Mota 如何绑定这个组件，opts 中有两个重要的成员，它的结构如下

\n
{\n  value: ['value 对应的属性名'],\n  event: ['value 改变的事件名']\n}\n
\n

所以，我们可以这样包装一个自定义文本输入框

\n
const MyInput = bindable(Input,{\n  value: ['value'],\n  event: ['onChange']\n});\n
\n

对这种「value 不需要转换，change 能通过 event 或 event.target.value 拿到值」的组件，通过如上的代码就能完成包装了。

\n

对于有 onChange 和 value 的这类文本输入组件，因为 opts 的默认值就是

\n
{\n  value: ['value'],\n  event: ['onChange']\n}\n
\n

所以，可以更简单，这样就行，

\n
const MyInput = bindable(Input);\n
\n

而对于 checkbox 和 radio 来讲，如上边讲到的它「根据不同的数据型有不同的绑定形式」，这就需要指定处理函数了，如下

\n
const radioOpts = {\n  prop: ['checked', (ctx, props) => {\n    const mValue = ctx.getValue();\n    if (typeof mValue == 'boolean') {\n      return !!mValue;\n    } else {\n      return mValue == props.value;\n    }\n  }],\n  event: ['onChange', (ctx, event) => {\n    const { value, checked } = event.target;\n    const mValue = ctx.getValue();\n    if (typeof mValue == 'boolean') {\n      ctx.setValue(checked);\n    } else if (checked) ctx.setValue(value);\n  }]\n};\n
\n

通过 prop 的第二个值，能指定「属性处理函数」，event 的第二个值能指取「事件处理函数」，处理函数的 ctx 是个特殊的对象

\n
    \n
  • ctx.getValue 能获取「当前绑定的模型数据」
    • \n
  • ctx.setValue 能设置「当前绑定的模型数据」
    • \n
\n

上边是 radio 的配置，首先，在「属性处理函数」中通过绑定的「模型数据的类型」决定 checked 最终的状态是什么，并在函数中返回。再次，在「事件处理函数」中通过绑定的「模型数据的类型」决定将什么值回写到模型中。

\n

通过「属性处理函数」和「事件处理函数」几乎就能将任意的自定义组件转换为「可绑定组件」了。

\n

另外，对于常见的 CheckBox 和 Radio 类型的组件 Mota 也提供了内建的 opts 配置支持，如果一个自定义组件拥有和「原生 checkbox 一致的属性和事件模型」，那边可以直接用简单的方式去包装，如下

\n
const MyCheckBox = bindable('checkbox',CheckBox);\nconst MyRadio = bindable('radio',Radio);\n
\n

好了，关于绑定就这些了。

\n"},{"group":"guide","name":"use_model","title":"使用 Hook API","index":7,"source":"# 使用 Hook API\n\n### 简单介绍\n在 React 发布包含 `Hooks` 的 `alpah` 版后，Mota 也在 `next` 版本中新增支持了 Hook 风格的 API，随着 React `v16.8` 版本的发布带来了稳定版的 `Hooks` 支持。\n\n目前，Mota \b已经在稳定版中，提供了 `Hook API` 的支持，利用 React 的 `Hooks` 可以让你在不编写类的情况下使用 `state` 和 React 的其他功能。而使用 Mota 极少的 `Hook API` 将给应用带来 Hook 风格可响应的全局状态管理支持。\n\n### 基本用法\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\n\nfunction App(){\n //通过 useModel 拿到一个可响应的 model\n const model = useModel({ count:0 });\n //定义累加按钮事件\n const onClick = useCallback(()=>model.count++);\n //--\n return
\n
{model.count}
\n \n
;\n}\n\nrender(, document.getElementId('root'));\n```\n\n仅有一个新增 API `useModel`，通过 `useModel` 可在一个 `Function Component` 中使用 `model`，如同在 `Class Component` 中的 `@model`，此时的 `model` 依然是可响应的，执行时会对组件进行「依赖收集」，当操作 `model` 的成员时（比如 `model.count=1` 的赋值操作），Mota 会自动发现组件依赖的数据发生了变化并通知组件进行更新。\n\n### 进阶说明\n\n在基本用法中提到了一个关键词「依赖收集」，通过 `useModel` 拿到了可响应的 `model`，默认情况下只有被组件依赖的模型数据发生了变化组件才会更新，比如下边的示例代码中，只有在 `model.a` 发生变化时，组件才会重新渲染。\n\n\n```js\nfunction Demo(){\n const model = useModel({ a:0, b:1 });\n ...\n return
{model.a}
\n}\n```\n\n实际开发过程中有时「组件依赖了模型上的某个对象，但希望这个对象的子成员发生变化时，组件也要重新渲染」\n\n```js\nfunction Demo(){\n const { info } = useModel({ info: { name: 'test'} });\n ...\n return \n}\n```\n\n因为对于 `Demo` 来说只依赖了 `info`，而 `info` 的引用是一直没有变化的，所以在 `info.name` 发生变化时 `Demo` 并不会重新渲染。那这样 `Info` 组件会一直显示旧的数据。\n\n如何处理这个问题？\n\n一个方法是让 `Info` 也通过 `useModel` 有自已的 `model`，那 `Info` 的依赖会被独立解析，比如\n\n```js\nfunction Info(props){\n const info = useModel(props.data);\n return
{info.name}
\n}\n```\n\n这个虽然 `Demo` 不会重新渲染，但 Mota 会发现 `Info` 依赖了 `info.name`，但发现数据变化时，`Info` 会自动更新。\n\n还有一个方法是，在更新 `info.name` 时换一个写法\n\n```js\n//通常的直接给 name 赋值\nmodel.info.name = 'test';\n//如下的给 info 赋值的写法，会让 Demo 发现 info 的变化\nmodel.info = {...model.info, name: 'test'};\n```\n\n除了上述的两个方法，还有一个方法就是通过 `useModel` 的第二个参数显示的声明额外的依赖，第二个参数可是一个数组，数组中是显式声明的依赖，格式为子成员的路径，如下\n\n```js\nfunction Demo(){\n const { info } = useModel({ \n info: { name: 'test'} \n }, ['info.name']);\n ...\n return \n}\n```\n\n但有时时模型数据是一个数组，我们无法直接指定每个子元素的路径，这时第二个参数还可以是一个函数，函数的参数是「变化的模型数据的路径」，可参函数中返回 `boolean` 值决定是否需要更新组件，如下\n\n```js\nfunction Demo(){\n const { info } = useModel({ \n info: [{name: 'test1'}] \n }, p=> p.endsWith('.name'));\n ...\n return \n}\n```\n\n示例中通过用 `endsWith` 路径是不是 `*.name` 结尾的决定要不要更新，当然也可以用更多的判断方法决定要不要更新。","filename":"markdowns/use_model.md","root":"/Users/Houfeng/my/dev/mota","result":"

使用 Hook API

\n

简单介绍

\n

在 React 发布包含 Hooks 的 alpah 版后，Mota 也在 next 版本中新增支持了 Hook 风格的 API，随着 React v16.8 版本的发布带来了稳定版的 Hooks 支持。

\n

目前，Mota \b已经在稳定版中，提供了 Hook API 的支持，利用 React 的 Hooks 可以让你在不编写类的情况下使用 state 和 React 的其他功能。而使用 Mota 极少的 Hook API 将给应用带来 Hook 风格可响应的全局状态管理支持。

\n

基本用法

\n
import React from 'react';\nimport { render } from 'react-dom';\n\nfunction App(){\n  //通过 useModel 拿到一个可响应的 model\n  const model = useModel({ count:0 });\n  //定义累加按钮事件\n  const onClick = useCallback(()=>model.count++);\n  //--\n  return <div>\n    <div>{model.count}</div>\n    <button onClick={onClick}>click me</button>\n  </div>;\n}\n\nrender(<App/>, document.getElementId('root'));\n
\n

仅有一个新增 API useModel，通过 useModel 可在一个 Function Component 中使用 model，如同在 Class Component 中的 @model，此时的 model 依然是可响应的，执行时会对组件进行「依赖收集」，当操作 model 的成员时（比如 model.count=1 的赋值操作），Mota 会自动发现组件依赖的数据发生了变化并通知组件进行更新。

\n

进阶说明

\n

在基本用法中提到了一个关键词「依赖收集」，通过 useModel 拿到了可响应的 model，默认情况下只有被组件依赖的模型数据发生了变化组件才会更新，比如下边的示例代码中，只有在 model.a 发生变化时，组件才会重新渲染。

\n
function Demo(){\n  const model = useModel({ a:0, b:1 });\n  ...\n  return <div>{model.a}</div>\n}\n
\n

实际开发过程中有时「组件依赖了模型上的某个对象，但希望这个对象的子成员发生变化时，组件也要重新渲染」

\n
function Demo(){\n  const { info } = useModel({ info: { name: 'test'} });\n  ...\n  return <Info data={info}/>\n}\n
\n

因为对于 Demo 来说只依赖了 info，而 info 的引用是一直没有变化的，所以在 info.name 发生变化时 Demo 并不会重新渲染。那这样 Info 组件会一直显示旧的数据。

\n

如何处理这个问题？

\n

一个方法是让 Info 也通过 useModel 有自已的 model，那 Info 的依赖会被独立解析，比如

\n
function Info(props){\n  const info = useModel(props.data);\n  return <div>{info.name}</div>\n}\n
\n

这个虽然 Demo 不会重新渲染，但 Mota 会发现 Info 依赖了 info.name，但发现数据变化时，Info 会自动更新。

\n

还有一个方法是，在更新 info.name 时换一个写法

\n
//通常的直接给 name 赋值\nmodel.info.name = 'test';\n//如下的给 info 赋值的写法，会让 Demo 发现 info 的变化\nmodel.info = {...model.info, name: 'test'};\n
\n

除了上述的两个方法，还有一个方法就是通过 useModel 的第二个参数显示的声明额外的依赖，第二个参数可是一个数组，数组中是显式声明的依赖，格式为子成员的路径，如下

\n
function Demo(){\n  const { info } = useModel({ \n    info: { name: 'test'} \n  }, ['info.name']);\n  ...\n  return <Info data={info}/>\n}\n
\n

但有时时模型数据是一个数组，我们无法直接指定每个子元素的路径，这时第二个参数还可以是一个函数，函数的参数是「变化的模型数据的路径」，可参函数中返回 boolean 值决定是否需要更新组件，如下

\n
function Demo(){\n  const { info } = useModel({ \n    info: [{name: 'test1'}] \n  }, p=> p.endsWith('.name'));\n  ...\n  return <Info data={info}/>\n}\n
\n

示例中通过用 endsWith 路径是不是 *.name 结尾的决定要不要更新，当然也可以用更多的判断方法决定要不要更新。

\n"},{"group":"guide","name":"hook_model","title":"面向 Hook 的模型","index":8,"source":"# 面向 Hook 的模型\n\n### 一些说明\n\n针对 Mota 的 `useModel` 的模型本质上和针对 `@model` 的模型并无本质区别，用以往的风格编写的「模型类」或「单例的普通 Object」，除了能用于 `@model` 也是能用于 `useModel` 的。\n\n既然用了 `Hook API`，是不是可在编写模型也避免再写「类」或「单例的 Object」？为此 `useModel` 还提供了用 `ES Module` 作为模型的支持，如用其他风格的模型一样，`ES Module` 风格的模型也不需要引用额外的依赖，仅用 `ES` 原生语法即可。\n\n### 用 ES Module 编写模型\n\n通过 `ES Module` 直接作为 `model` 的优点时「简单、直接」，同时由于为了保证「可响应」不被破坏，需要一点点约束，就是「必须导出一个 state 对象」，如下\n\n```js\nexport const state = {\n name: 'test'\n}\n\nexport function setName(name){\n state.name = name\n}\n```\n\n上边的代码是一个最简单的可当作 `model` 的 `ES Module`，一个包含「state 和一组件函数」的 `ES Module` 就是一个可被 `useModel` 使用的 `model`，参考如下代码\n\n```js\nimport * as demo from './models/demo';\n\nfunction App(){\n const { name } = useModel(demo);\n return
{name}
;\n}\n```\n\n注意：必须 export 一个 state 的约束只针对于 `ES Module`，用 `class` 或 `object` 的风格编写的 `model` 无任何约束。","filename":"markdowns/hook_model.md","root":"/Users/Houfeng/my/dev/mota","result":"

面向 Hook 的模型

\n

一些说明

\n

针对 Mota 的 useModel 的模型本质上和针对 @model 的模型并无本质区别，用以往的风格编写的「模型类」或「单例的普通 Object」，除了能用于 @model 也是能用于 useModel 的。

\n

既然用了 Hook API，是不是可在编写模型也避免再写「类」或「单例的 Object」？为此 useModel 还提供了用 ES Module 作为模型的支持，如用其他风格的模型一样，ES Module 风格的模型也不需要引用额外的依赖，仅用 ES 原生语法即可。

\n

用 ES Module 编写模型

\n

通过 ES Module 直接作为 model 的优点时「简单、直接」，同时由于为了保证「可响应」不被破坏，需要一点点约束，就是「必须导出一个 state 对象」，如下

\n
export const state = {\n  name: 'test'\n}\n\nexport function setName(name){\n  state.name = name\n}\n
\n

上边的代码是一个最简单的可当作 model 的 ES Module，一个包含「state 和一组件函数」的 ES Module 就是一个可被 useModel 使用的 model，参考如下代码

\n
import * as demo from './models/demo';\n\nfunction App(){\n  const { name } = useModel(demo);\n  return <div>{name}</div>;\n}\n
\n

注意：必须 export 一个 state 的约束只针对于 ES Module，用 class 或 object 的风格编写的 model 无任何约束。

\n"},{"group":"guide","name":"typescript","title":"在 TS 中使用","index":8,"source":"# 在 TS 中使用 Mota\n\nMota 的 `Package` 中自带了「类型定义文件」，无论使用 `Class + Decorator` 风格的 API 或使用 `Hooks` 风格的 API，都能愉快的使用 TypeScript，下边有两个小提示。\n\n### 提示一：使用 @model \n\n在通过 `@model` 为组件关联了一个 `model` 后，需要声明 `this.model` 的类型，参考如下代码\n\n```js\nimport * as React from \"react\";\nimport { model, watch, mapping } from \"mota\";\nimport { DemoModel } from \"./DemoModel\";\n\n@model(DemoModel)\nexport class Demo extends React.Component {\n\n //需要声明 model 的类型\n model: DemoModel;\n\n render() {\n //便能让 this.model 具备完整的类型提示了\n const { name } = this.model;\n return
\n {name} \n
;\n }\n}\n```\n\n### 提示一：使用 useModel\n\n完整的 `useModel` 的定义为 `useModel(model:T)=>T`，但使用 `useModel` 时一般不需做特别的声明，默认情况下 `TS` 就能完成类型推导\n\n```js\nimport * as React from \"react\";\nimport { useModel } from \"mota\";\nimport { DemoModel } from \"./DemoModel\";\n\nexport function Demo {\n const { name } = useModel(DemoModel);\n return
\n {name} \n
;\n}\n```","filename":"markdowns/typescript.md","root":"/Users/Houfeng/my/dev/mota","result":"

在 TS 中使用 Mota

\n

Mota 的 Package 中自带了「类型定义文件」，无论使用 Class + Decorator 风格的 API 或使用 Hooks 风格的 API，都能愉快的使用 TypeScript，下边有两个小提示。

\n

提示一：使用 @model

\n

在通过 @model 为组件关联了一个 model 后，需要声明 this.model 的类型，参考如下代码

\n
import * as React from \"react\";\nimport { model, watch, mapping } from \"mota\";\nimport { DemoModel } from \"./DemoModel\";\n\n@model(DemoModel)\nexport class Demo extends React.Component {\n\n  //需要声明 model 的类型\n  model: DemoModel;\n\n  render() {\n    //便能让 this.model 具备完整的类型提示了\n    const { name } = this.model;\n    return <div className=\"demo\">  \n      {name}  \n    </div>;\n  }\n}\n
\n

提示一：使用 useModel

\n

完整的 useModel 的定义为 useModel<T>(model:T)=>T，但使用 useModel 时一般不需做特别的声明，默认情况下 TS 就能完成类型推导

\n
import * as React from \"react\";\nimport { useModel } from \"mota\";\nimport { DemoModel } from \"./DemoModel\";\n\nexport function Demo {\n  const { name } = useModel(DemoModel);\n  return <div className=\"demo\">  \n    {name}  \n  </div>;\n}\n
\n"}]}],"links":[{"text":"状态管理 (Mota)","url":"//houfeng.net/mota/"},{"text":"数据验证 (Validation)","url":"//houfeng.net/mota-validation/"},{"text":"表单组件 (Form)","url":"//houfeng.net/mota-form/"},{"text":"源码 (GitHub)","url":"//github.com/Houfeng/mota"}]}],"plugins":[{"name":"doczilla-place","options":{}},{"name":"doczilla-include","options":{}},{"name":"doczilla-container","options":{}},{"name":"doczilla-highlight","options":{}},{"name":"doczilla-details","options":{}},{"name":"doczilla-card","options":{}},{"name":"doczilla-anchor","options":{}}],"mode":"hash","baseUri":"","extname":""}; \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index b251c3c..47ba01e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,24 +1,16 @@ - + - Mota - - - - - - - + +
- - - + \ No newline at end of file diff --git a/docs/logo.jpg b/docs/logo.jpg deleted file mode 100644 index d24f88a..0000000 Binary files a/docs/logo.jpg and /dev/null differ diff --git a/docs/zh/guide/autorun.html b/docs/zh/guide/autorun.html deleted file mode 100644 index 5ad6f60..0000000 --- a/docs/zh/guide/autorun.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - 自执行函数 - Mota - - - - - - - - - -
- - - - - - \ No newline at end of file diff --git a/docs/zh/guide/binding.html b/docs/zh/guide/binding.html deleted file mode 100644 index 63f7e18..0000000 --- a/docs/zh/guide/binding.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - 数据绑定 - Mota - - - - - - - - - -
- - - - - - \ No newline at end of file diff --git a/docs/zh/guide/hook_model.html b/docs/zh/guide/hook_model.html deleted file mode 100644 index 0aff211..0000000 --- a/docs/zh/guide/hook_model.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - 面向 Hook 的模型 - Mota - - - - - - - - - -
- - - - - - \ No newline at end of file diff --git a/docs/zh/guide/mapping.html b/docs/zh/guide/mapping.html deleted file mode 100644 index b6d425c..0000000 --- a/docs/zh/guide/mapping.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - 属性映射 - Mota - - - - - - - - - -
- - - - - - \ No newline at end of file diff --git a/docs/zh/guide/model.html b/docs/zh/guide/model.html deleted file mode 100644 index da7dae8..0000000 --- a/docs/zh/guide/model.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - 编写业务模型 - Mota - - - - - - - - - -
- - - - - - \ No newline at end of file diff --git a/docs/zh/guide/quick.html b/docs/zh/guide/quick.html deleted file mode 100644 index 04e8747..0000000 --- a/docs/zh/guide/quick.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - 快速开始 - Mota - - - - - - - - - -
- - - - - - \ No newline at end of file diff --git a/docs/zh/guide/typescript.html b/docs/zh/guide/typescript.html deleted file mode 100644 index 710f790..0000000 --- a/docs/zh/guide/typescript.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - 在 TS 中使用 - Mota - - - - - - - - - -
- - - - - - \ No newline at end of file diff --git a/docs/zh/guide/use_model.html b/docs/zh/guide/use_model.html deleted file mode 100644 index 65ac113..0000000 --- a/docs/zh/guide/use_model.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - 使用 Hook API - Mota - - - - - - - - - -
- - - - - - \ No newline at end of file diff --git a/docs/zh/guide/watch.html b/docs/zh/guide/watch.html deleted file mode 100644 index 8ce19f5..0000000 --- a/docs/zh/guide/watch.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - 监听模型变化 - Mota - - - - - - - - - -
- - - - - - \ No newline at end of file diff --git a/markdowns/quick.md b/markdowns/quick.md index 72d7c12..b752832 100644 --- a/markdowns/quick.md +++ b/markdowns/quick.md @@ -18,6 +18,8 @@ Mota 是一个响应式的 React 应用状态管理库，基于 Mota 你可以 [在线 TodoList 示例](http://houfeng.net/dn-template-mota/example/) ([示例源码](https://github.com/Houfeng/dn-template-mota)) + + ## 安装 通过 npm 安装，如下