创建/ 动作

浏览器的相继执行管道,完全通过HTML5属性配置. 单人 actions 属性 将任意数量的组件处决连在一起:每个动作运行,信号完成,只有接下来的动作才开始. 动作由每个 CoCreate 模块贡献,所以保存了记录,调用第三方API,渲染出一个模板,等待一个事件,并遵循一个链接编译成一个不写JavaScript的宣告序列.

文档

完整的指南和工作演示请参见 文档。 。 。 .

目录

• 特征
• 安装
• 使用量
• 如何运作
• 动作链解剖
• 顺序和完成
• 控制动作
• 元素方法动作
• 已注册的行动
• 目标要素
• Java 脚本 API
• 行为说明
• 通知
• 路线图
• 如何贡献
• 关于
• 许可证

特征

• 声明顺序 : 任何处决数目都以一个属性进行,严格按顺序进行.
• 同步意识 : 每个动作都表示它自己的完成,所以数据库写作,网络请求,并在下一步开始前完成.
• 普遍登记: 任何模块都可以按名称贡献一个动作,使其行为可以在整个应用程序中进行标记.
• 使用元素方法: 直接向被询问人员打电话,等待他们返回的承诺.
• 流量控制 : 等待事件,延迟执行,触发其他链条,提交表单,并切换按钮状态作为一等步骤.
• 中止语义 : 当一个步骤失败或一个条件没有得到满足时,一个行动可以停止链的剩余部分.
• 目标: 动作参数接受完整的 CoCreate 选择器语法,包括 $parent, (中文(简体) ), $next, (中文(简体) ), $closest,以及 $document。 。 。 .
• 自动绑定 : DOM后期添加的元素被自动捆绑,因此使模板表现得像静态标记.

安装

npm install @cocreate/actions

yarn add @cocreate/actions

光盘N

<script src="https://cdn.CoCreateJS.com/actions/latest/CoCreate-actions.min.js"></script>

使用量

链式执行

动作从左到右 各各等前所修行相.

<button actions="save, reset">Save</button>

传入参数

括号内提供一个参数,通常是一个选择器.

<button actions="save, action($document #refresh-list)">Save</button>

跨模块链

因为每个模块都按名称注册其动作,所以单个链条可以坚持一个记录,调用API,并更新接口.

<button actions="save, stripe.customers.create, render, reset">
    Create customer
</button>

延迟和等待

<button actions="save, timeout(1000), action($document #notify)">Save</button>

如何运作

1. 点击听器绑定到每个 [actions] 元素,包括后面插入的元素.
2. 当被触发时,在逗号上将属性被分割成命令的已分级动作列表.
3. 每个条目被解为名称和可选的括号参数。 包含点的名称会被分为动作名称和方法,所以 stripe.customers.create 援引 stripe 使用该方法的动作 customers.create。 。 。 .
4. 第一次行动开始 管道附带一个一次性的监听器,用于该行动的完成活动,然后援引它.
5. 当完成事件起火时,下一个动作开始. 这重复到链被耗尽或中止为止.
6. 一旦每项行动完成,如果有真正的行动,管道将提交原生表格,然后在该要素上跟踪任何链接.

动作链解剖

<button actions="save, timeout(500), stripe.customers.create">Go</button>

顺序和完成

动作在 完成活动 向元素开火。 登记宣布该事件,它默认为诉讼本身的名称.

Actions.init({
    name: "save",
    endEvent: "saved",
    callback: (action) => { /* … */ }
});

回电收到一切工作需要

既未发送完成事件, 也未呼叫的行动 continue() 或者说 abort() 离开链子等待,这是以后解决的步骤的预期行为.

用被点名所写的动作每个运行都会收到一个独特的完成事件,因此使用同一提供者的并行链条永远不会互相解决.

控制动作

这些资料总是可以提供,不需要登记.

<button actions="disabled, save, disabled">Save</button>

<button actions="save, event(uploaded), render">Save and wait for upload</button>

元素方法动作

当一个名字没有登记,不是控制动作时,管道把它当作一种 方法调用被询问的元素每一个显示该名称功能的匹配都引用了它,任何返回的承诺都等待着链条继续.

<button actions="read($document #profile)">Reload profile</button>

这个叫 read() 打开 #profile。同一机制涵盖 renderValue, (中文(简体) ), getValue,而模块中的任何方法都添加到元素中,这使得管道可以扩展而无需登记任何内容.

一个方法动作需要一个参数来选择它的目标. submit 财务报告和审定财务报表 disabled 是唯一没有控制操作的动作.

已注册的行动

模块在导入时登记动作。 常用名称包括:

因为事件前缀被注册为动作,所以绑定可以作为一个步骤,而不是通过用户交互来引用:

<button actions="save, click($document #panel)">Save and open panel</button>

目标要素

参数接受标准的 CSS 选择器加 Coreate 关系操作器, 以及后缀 [] 选择每个匹配而不是第一个.

<button actions="save, action($closest .card .refresh[])">Save</button>

Java 脚本 API

注册动作

import Actions from "@cocreate/actions";

Actions.init({
    name: "notify",
    endEvent: "notified",
    callback: async (action) => {
        await sendNotification(action.params);
        action.end();
    }
});

一次登记若干次

init() 接受数组,并且 name 可能本身是一系列别名.

Actions.init([
    { name: ["publish", "release"], endEvent: "published", callback: publish },
    { name: "archive", endEvent: "archived", callback: archive }
]);

注册是一等功:一个已经注册的名称没有被更改,所以第一个声称拥有名称的模块.

中止链条

Actions.init({
    name: "validate",
    callback: (action) => {
        if (!action.form.checkValidity()) return action.abort();
        action.end();
    }
});

<button actions="validate, save, reset">Submit</button>

行为说明

• 链由 click。没有本地点击目标的元素仍然可以从另一个链中驱动 action(selector)。 。 。 .
• 管道解决最近的 [actions] 祖先,所以图标和横跨在按钮内会触发按钮的链.
• 链跑时防止了默认点击行为 。 一种其 action 是一个真实的 URL 本地提交.
• 最终动作后,在含有真实动作 URL 的表格内有一个提交按钮提交表格,以及任何 href, (中文(简体) ), target,或 state_to 标注在元素上.
• 中止停止链条上所剩的每个动作,包括线索提交和链接行为.

通知

图书馆的所有更新都记录在我们 变化 财务报告和审定财务报表 释放。您也可以订阅电子邮件以发布和中断更改.

路线图

即将作出的改进包括:

• 有条件的行动和分支
• 平行行动小组
• 处理和重试错误
• 命名的链条可跨元素重复使用
• 链式执行的开发模式追踪

如果你对这个项目的未来方向有兴趣, 请看看我们的开放 问题 财务报告和审定财务报表 拖动请求我们想听听你的反馈.

如何贡献

我们鼓励为我们的图书馆捐款(你甚至可能得分) 捐款 详细指南.

我们希望这个图书馆由社区驱动, Coreate 领导。 我们需要你的帮助来实现这一目标。 为了帮助确保我们按正确的顺序建造正确的东西,我们请你们创造 问题 财务报告和审定财务报表 拖动请求 或只是对现有问题进行投票或发表意见或提出请求.

我们感谢你的继续支持,谢谢!

关于

创造者行动由创造者开发者经验团队指导和支持.

请发电子邮件给开发者体验团队 这里 如果有任何疑问.

创造行动由创造行动维护和资助. CoCreate的名称和标志是CoCreate,LLC的商标.

许可证

《麻省理工学院许可证》