49 lines
16 KiB
JavaScript
49 lines
16 KiB
JavaScript
|
define('docs/advanced.md', function(require, exports, module) {
|
|||
|
|
|
|||
|
|
module.exports = {
|
|||
|
|
"title": "高级用法",
|
|||
|
|
"shortname": "advanced",
|
|||
|
|
"html": "<p>在开始阅读之前，希望你已经阅读 <a href=\"/amis/docs/basic\">基本用法</a> 。</p>\n<h2><a class=\"anchor\" name=\"%E6%95%B0%E6%8D%AE%E4%BD%9C%E7%94%A8%E5%9F%9F\" href=\"#%E6%95%B0%E6%8D%AE%E4%BD%9C%E7%94%A8%E5%9F%9F\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>数据作用域</h2><p>配置中很多地方都可以用变量如： <a href=\"/amis/docs/renderers/Tpl\">tpl</a> 类型的渲染器、API 中的 Url、FormItem 中的 source 配置、visibleOn、disabledOn 以及 Form 中的 <code>redirect</code> 配置等等。</p>\n<p>那么都有哪些数据可以用？这取决于在哪个容器，关于容器中的数据说明如下：</p>\n<ul>\n<li><code>page</code> 等价于全局变量，因为顶级渲染器就是它，所以下面的所有组件都能用到这个里面的数据。<ul>\n<li><code>amisPage</code> 当前页面的数据信息，包含标题，id，key 之类的信息。<code>注意：平台中使用才有此变量。</code></li>\n<li><code>amisUser</code> 当前用户信息，包含邮箱和用户名信息。<code>注意：平台中使用才有此变量。</code></li>\n<li><code>params 中的数据</code> 如果地址栏中也携带了参数，也会 merge 到该层的数据中。</li>\n<li><code>initApi 返回的数据</code> 如果 page 设置了 <code>initApi</code> 那么初始化的时候会从 API 中拉取数据，拉取到的数据可以用于整个页面。</li>\n</ul>\n</li>\n<li><p><code>crud</code></p>\n<ul>\n<li>父级 容器中的数据可以直接使用，如 page 容器</li>\n<li><code>api</code> 返回的数据，crud 的 api 除了可以返回 <code>rows</code> 和 <code>count</code> 数据外，其他的数据会被 merge 到数据中，供容器使用。</li>\n</ul>\n</li>\n<li><p><code>form</code></p>\n<ul>\n<li>父级 容器中的数据可以直接使用，如 page 容器</li>\n<li><code>initApi</code> 返回的数据。</li>\n<li>FormItem 的数据直接会存入到数据中，而且每次修改都会及时更新。通过 FormItem 设置的 <code>name</code> 值获取。</li>\n</ul>\n</li>\n<li><p><code>formItem</code> 表单项中，所在的表单中的数据都能用。</p>\n</li>\n<li><code>wizard</code> 同 form</li>\n<li><code>dialog</code> dialog 由 button 触发弹出，携带的数据根据按钮所在的位置来决定。<ul>\n<li>form 中弹出则会把 form 中的数据复制份传给 dialog。</li>\n<li>crud 中的批量操作按钮。把整个列表数据复制给 dialog。</li>\n<li>crud 中的某一项中的按钮，则只会把对应的那一条数据拷贝给 dialog。</li>\n</ul>\n</li>\n<li><code>service</code><ul>\n<li>父级 容器中的数据可以直接使用，如 page 容器</li>\n<li>如果配置了 <code>api</code>, <code>api</code> 返回的数据可以用。</li>\n</ul>\n</li>\n</ul>\n<p>取值过程，也跟 JS 作用域中取值一样，当前作用域中有，则直接返回当前作用域中，如果没有当前作用域没有，会一直往上找，直到找到了为止。如果存在同名变量，则返回就近作用域中数据。</p>\n<p>需要注意的是，要取到值一定是在自己所在的作用域，或者上级作用域里面，同级的是取不到的，如果需要怎么办？可以往下看联动，比如：FormA 的数据发送给 formB, 另外一种方式，可以把接口拉取换到父级组件去操作，没有可拉取数据的组件，就一起包在一个 service 控件里面。</p>\n<h2><a class=\"anchor\" name=\"%E8%81%94%E5%8A%A8\" href=\"#%E8%81%94%E5%8A%A8\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-li
|
|||
|
|
"toc": {
|
|||
|
|
"label": "目录",
|
|||
|
|
"type": "toc",
|
|||
|
|
"children": [
|
|||
|
|
{
|
|||
|
|
"label": "数据作用域",
|
|||
|
|
"fragment": "%E6%95%B0%E6%8D%AE%E4%BD%9C%E7%94%A8%E5%9F%9F",
|
|||
|
|
"fullPath": "#%E6%95%B0%E6%8D%AE%E4%BD%9C%E7%94%A8%E5%9F%9F",
|
|||
|
|
"level": 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"label": "联动",
|
|||
|
|
"fragment": "%E8%81%94%E5%8A%A8",
|
|||
|
|
"fullPath": "#%E8%81%94%E5%8A%A8",
|
|||
|
|
"level": 2,
|
|||
|
|
"children": [
|
|||
|
|
{
|
|||
|
|
"label": "简单的显隐联动",
|
|||
|
|
"fragment": "%E7%AE%80%E5%8D%95%E7%9A%84%E6%98%BE%E9%9A%90%E8%81%94%E5%8A%A8",
|
|||
|
|
"fullPath": "#%E7%AE%80%E5%8D%95%E7%9A%84%E6%98%BE%E9%9A%90%E8%81%94%E5%8A%A8",
|
|||
|
|
"level": 3
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"label": "数据联动",
|
|||
|
|
"fragment": "%E6%95%B0%E6%8D%AE%E8%81%94%E5%8A%A8",
|
|||
|
|
"fullPath": "#%E6%95%B0%E6%8D%AE%E8%81%94%E5%8A%A8",
|
|||
|
|
"level": 3
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"label": "组件间通信",
|
|||
|
|
"fragment": "%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1",
|
|||
|
|
"fullPath": "#%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1",
|
|||
|
|
"level": 3
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
"level": 0
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
});
|