UNPKG

gfs-react-dm

Version:

简化react和redux的繁杂流程,更简单的数据操作管理

1,751 lines (897 loc) 68.2 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimal-ui" /> <title>Control - gfs-react-dm</title> <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../assets/css/main.css" id="site_styles"> <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> </head> <body class="yui3-smart" _assetsPath="../assets"> <nav class="navbar navbar-inverse navbar-fixed-top custom-navbar" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand mainlogo" href=""> <img alt="gfs-react-dm" src="../assets/css/logo.png" title="gfs-react-dm"> gfs-react-dm </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">主页</a> </li> </ul> <div class="navbar-form navbar-right filterAPi" autocomplete="off"> <input type="text" id='txtSearchAPI' class="form-control search-query" placeholder="Search for API" /> <ul id="filterList" class="filterItems dropdown-menu" role="menu"></ul> </div> </div> </div> </nav> <div id="sidebar"> <h3>模块/类</h3> <div id="api-tabview-filter"> <input id='txtSearch' type="search" class="form-control" placeholder="Type to filter Modules/Classes"> </div> <dl id="sidebar_list"> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/gfs-react-mvc.html">gfs-react-mvc</a> </dt> <dd> <ul> <li> <a href="../classes/Control.html">Control</a> <ul> </ul> </li> <li> <a href="../classes/Page.html">Page</a> <ul> </ul> </li> <li> <a href="../classes/Model.html">Model</a> <ul> </ul> </li> <li> <a href="../classes/View.html">View</a> <ul> </ul> </li> </ul> </dd> </dl> <div class="icon-sidebar-btn icon-sidebar-btn-open"><span class="glyphicon glyphicon-chevron-left"></span>收起</div> </div> <div class="stdoc-content"> <div class="apidocs"> <div id="docs-main"> <div class="content"> <div class="page-header"> <h1>Control</h1> </div> <div class="well well-small sign-left3"> <div class="stdoc-code"><p>控制器</p> </div> </div> <div class="hide-view-demo hide-edit-code hide-found-at"> <div class="tab-content"> <div id="class" class="tab-pane"> <div class="well well-small classDetail sign-left1"> <div class="foundat"> Defined in: <a href="../files/src_control.js.html#l6"><code>src&#x2F;control.js:6</code></a> </div> Module: <a href="../modules/gfs-react-mvc.html">gfs-react-mvc</a> </div> </div> <div id="method" class="tab-pane active"> <h2 class="off-left">方法</h2> <div id="method_Control" class="method item"> <h3 class="name">Control</h3> <code> Control <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> modelName </li> <li class="arg"> loadingbar </li> <li class="arg"> mock </li> </ul><span class="paren">)</span> </div> </code> <span class="returns-inline"> <span class="type"></span> </span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_control.js.html#l324"><code>src&#x2F;control.js:324</code></a> </p> </div> <div class="description well well-small sign-left3"> <div class="stdoc-code"><p>此方法是一个装饰器,只能用于类,被装饰后的类会变成对象列表(JSON)格式,主要目的是传递给组件使用,通过redux connect连接。 被装饰的类将成为一个控制器,处理异步数据逻辑或业务逻辑,将数据传递给视图或服务器</p> </div> </div> <div class="params"> <h4>参数:</h4> <div class="clearfix params-wap-table"> <div class="params-box"> <code class="param-name">modelName</code> <span class="type">Object</span> <span class="param-description"> <p>实体类对象</p> </span> </div> <div class="params-box"> <code class="param-name">loadingbar</code> <span class="type">Loadingbar</span> <span class="param-description"> <p>废弃</p> </span> </div> <div class="params-box"> <code class="param-name">mock</code> <span class="type">Mock</span> <span class="param-description"> <p>废弃</p> </span> </div> </div> <table class="table table-bordered params-pc-table"> <tr class='active'><th>参数名</th><th>类型</th><th>标识</th><th>描述</th></tr> <tr class="param"> <td> <code class="param-name">modelName</code> <td> <span class="type">Object</span> <td> </td> <td><div class="param-description"> <p>实体类对象</p> </div> </tr> <tr class="param"> <td> <code class="param-name">loadingbar</code> <td> <span class="type">Loadingbar</span> <td> </td> <td><div class="param-description"> <p>废弃</p> </div> </tr> <tr class="param"> <td> <code class="param-name">mock</code> <td> <span class="type">Mock</span> <td> </td> <td><div class="param-description"> <p>废弃</p> </div> </tr> </table> </div> <div class="returns"> <h4>Returns:</h4> <div class="returns-description"> <p>object</p> </div> </div> <div class="example"> <h4>Example:</h4> <ul class="nav nav-tabs example-list"> </ul> <div class="example-content "> <div class="stdoc-code"><pre class="code prettyprint"><code> import {Sync,Control} from &#39;gfs-react-mvc&#39; import TestModel from &#39;../model/TestModel&#39; //这里由于@为文档关键符号,所以下面将以$代替 //@Control(TestModel) class TestControl{ constructor(){} $action changeAge(){ fetch(&#39;/test.json&#39;[,params]).then((data)=&gt;{ //control中默认提供update、del、insert、save四种操作数据方法,会根据不同的control名生成,如下根据testControl生成的方法testControlUpdate dispatch(this.testControlUpdate(&#39;age&#39;,&#39;ajax改变的age:&#39;+data.age) ) }) } //不建议使用下列方式 //这里由于@为文档关键符号,所以下面将以$代替 $Sync(&#39;/test&#39;,{ method:&#39;get&#39; }) $action save(data){ //此处data是异步请求后服务器返回的结果 if(data){ //返回数据更新页面节点信息 return data } //不做任何改变 return false } }</code></pre> </div> </div> <div class="btn-method-box"> <button class="btn btn-info btn-viewDemo" type="button">查看示例</button> <button class="btn btn-info btn-editDemo" type="button">编辑代码</button> </div> <div class="device"></div> </div> </div> <div id="method_del" class="method item"> <h3 class="name">del</h3> <code> del <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> path </li> <li class="arg"> modelName </li> </ul><span class="paren">)</span> </div> </code> <span class="returns-inline"> <span class="type"></span> </span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_control.js.html#l16"><code>src&#x2F;control.js:16</code></a> </p> </div> <div class="description well well-small sign-left3"> <div class="stdoc-code"><p>删除store中某条数据</p> </div> </div> <div class="params"> <h4>参数:</h4> <div class="clearfix params-wap-table"> <div class="params-box"> <code class="param-name">path</code> <span class="type">String</span> <span class="param-description"> <p>需要被删除的属性地址,根据具体的对象结构,例如一个结构为:var data={name:&#39;test&#39;,other:{age:18}}的对象,如果想删除age的值应该是这样:this.del(&#39;data.other.age&#39;)</p> </span> </div> <div class="params-box"> <code class="param-name">modelName</code> <span class="type">String</span> <span class="param-description"> <p>model名字,默认是绑定model之后的modelname</p> </span> </div> </div> <table class="table table-bordered params-pc-table"> <tr class='active'><th>参数名</th><th>类型</th><th>标识</th><th>描述</th></tr> <tr class="param"> <td> <code class="param-name">path</code> <td> <span class="type">String</span> <td> </td> <td><div class="param-description"> <p>需要被删除的属性地址,根据具体的对象结构,例如一个结构为:var data={name:&#39;test&#39;,other:{age:18}}的对象,如果想删除age的值应该是这样:this.del(&#39;data.other.age&#39;)</p> </div> </tr> <tr class="param"> <td> <code class="param-name">modelName</code> <td> <span class="type">String</span> <td> </td> <td><div class="param-description"> <p>model名字,默认是绑定model之后的modelname</p> </div> </tr> </table> </div> <div class="returns"> <h4>Returns:</h4> <div class="returns-description"> <p>Function</p> </div> </div> <div class="example"> <h4>Example:</h4> <ul class="nav nav-tabs example-list"> </ul> <div class="example-content "> <div class="stdoc-code"><pre class="code prettyprint"><code> $Control(TestModel) class TestControl { delTest(data,dispatch,modelJson,model){ this.del(&#39;age&#39;) } }</code></pre> </div> </div> <div class="btn-method-box"> <button class="btn btn-info btn-viewDemo" type="button">查看示例</button> <button class="btn btn-info btn-editDemo" type="button">编辑代码</button> </div> <div class="device"></div> </div> </div> <div id="method_getModelName" class="method item"> <h3 class="name">getModelName</h3> <code> getModelName <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> actionName </li> <li class="arg"> isDefault </li> <li class="arg"> modelName </li> </ul><span class="paren">)</span> </div> </code> <span class="returns-inline"> <span class="type"></span> </span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_control.js.html#l406"><code>src&#x2F;control.js:406</code></a> </p> </div> <div class="description well well-small sign-left3"> <div class="stdoc-code"><p>获取model方法名全名,在未传任何值时返回方法前缀</p> </div> </div> <div class="params"> <h4>参数:</h4> <div class="clearfix params-wap-table"> <div class="params-box"> <code class="param-name">actionName</code> <span class="type">String</span> <span class="param-description"> <p>default=&#39;&#39;,方法名,可选</p> </span> </div> <div class="params-box"> <code class="param-name">isDefault</code> <span class="type">Boolean</span> <span class="param-description"> <p>是否获取系统中提供的方法名,默认false,可选</p> </span> </div> <div class="params-box"> <code class="param-name">modelName</code> <span class="type">String</span> <span class="param-description"> <p>model名字,可选</p> </span> </div> </div> <table class="table table-bordered params-pc-table"> <tr class='active'><th>参数名</th><th>类型</th><th>标识</th><th>描述</th></tr> <tr class="param"> <td> <code class="param-name">actionName</code> <td> <span class="type">String</span> <td> </td> <td><div class="param-description"> <p>default=&#39;&#39;,方法名,可选</p> </div> </tr> <tr class="param"> <td> <code class="param-name">isDefault</code> <td> <span class="type">Boolean</span> <td> </td> <td><div class="param-description"> <p>是否获取系统中提供的方法名,默认false,可选</p> </div> </tr> <tr class="param"> <td> <code class="param-name">modelName</code> <td> <span class="type">String</span> <td> </td> <td><div class="param-description"> <p>model名字,可选</p> </div> </tr> </table> </div> <div class="returns"> <h4>Returns:</h4> <div class="returns-description"> <p>string</p> </div> </div> </div> <div id="method_insert" class="method item"> <h3 class="name">insert</h3> <code> insert <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> path </li> <li class="arg"> data </li> <li class="arg"> isImmutable </li> <li class="arg"> modelName </li> </ul><span class="paren">)</span> </div> </code> <span class="returns-inline"> <span class="type"></span> </span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_control.js.html#l113"><code>src&#x2F;control.js:113</code></a> </p> </div> <div class="description well well-small sign-left3"> <div class="stdoc-code"><p>插入store中某条数据</p> </div> </div> <div class="params"> <h4>参数:</h4> <div class="clearfix params-wap-table"> <div class="params-box"> <code class="param-name">path</code> <span class="type">String</span> <span class="param-description"> <p>需要被删除的属性地址,根据具体的对象结构,例如一个结构为:var data={name:&#39;test&#39;,other:{age:18}}的对象,如果想要在data中新增一些字段应该这样:this.insert({sex:&#39;男&#39;})</p> </span> </div> <div class="params-box"> <code class="param-name">data</code> <span class="type">String | object</span> <span class="param-description"> <p>需要保存的值,新的值会覆盖之前的值</p> </span> </div> <div class="params-box"> <code class="param-name">isImmutable</code> <span class="type">Boolean</span> <span class="param-description"> <p>是否将值转换为Immutable类型,默认为false,如果更新的值为object类型建议设置为true</p> </span> </div> <div class="params-box"> <code class="param-name">modelName</code> <span class="type">String</span> <span class="param-description"> <p>model名字,默认是绑定model之后的modelname</p> </span> </div> </div> <table class="table table-bordered params-pc-table"> <tr class='active'><th>参数名</th><th>类型</th><th>标识</th><th>描述</th></tr> <tr class="param"> <td> <code class="param-name">path</code> <td> <span class="type">String</span> <td> </td> <td><div class="param-description"> <p>需要被删除的属性地址,根据具体的对象结构,例如一个结构为:var data={name:&#39;test&#39;,other:{age:18}}的对象,如果想要在data中新增一些字段应该这样:this.insert({sex:&#39;男&#39;})</p> </div> </tr> <tr class="param"> <td> <code class="param-name">data</code> <td> <span class="type">String | object</span> <td> </td> <td><div class="param-description"> <p>需要保存的值,新的值会覆盖之前的值</p> </div> </tr> <tr class="param"> <td> <code class="param-name">isImmutable</code> <td> <span class="type">Boolean</span> <td> </td> <td><div class="param-description"> <p>是否将值转换为Immutable类型,默认为false,如果更新的值为object类型建议设置为true</p> </div> </tr> <tr class="param"> <td> <code class="param-name">modelName</code> <td> <span class="type">String</span> <td> </td> <td><div class="param-description"> <p>model名字,默认是绑定model之后的modelname</p> </div> </tr> </table> </div> <div class="returns"> <h4>Returns:</h4> <div class="returns-description"> <p>Function</p> </div> </div> <div class="example"> <h4>Example:</h4> <ul class="nav nav-tabs example-list"> </ul> <div class="example-content "> <div class="stdoc-code"><pre class="code prettyprint"><code> $Control(TestModel) class TestControl { insertTest(data,dispatch,modelJson,model){ fetch(&#39;/test&#39;).then((data)=&gt;{ this.insert({ sex:&#39;男&#39; }) }) } }</code></pre> </div> </div> <div class="btn-method-box"> <button class="btn btn-info btn-viewDemo" type="button">查看示例</button> <button class="btn btn-info btn-editDemo" type="button">编辑代码</button> </div> <div class="device"></div> </div> </div> <div id="method_save" class="method item"> <h3 class="name">save</h3> <code> save <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> path </li> <li class="arg"> data </li> <li class="arg"> isImmutable </li> <li class="arg"> modelName </li> </ul><span class="paren">)</span> </div> </code> <span class="returns-inline"> <span class="type"></span> </span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_control.js.html#l151"><code>src&#x2F;control.js:151</code></a> </p> </div> <div class="description well well-small sign-left3"> <div class="stdoc-code"><p>保存store中某条数据</p> </div> </div> <div class="params"> <h4>参数:</h4> <div class="clearfix params-wap-table"> <div class="params-box"> <code class="param-name">path</code> <span class="type">String</span> <span class="param-description"> <p>跟update一样</p> </span> </div> <div class="params-box"> <code class="param-name">data</code> <span class="type">String | object</span> <span class="param-description"> <p>需要保存的值,新的值会覆盖之前的值</p> </span> </div> <div class="params-box"> <code class="param-name">isImmutable</code> <span class="type">Boolean</span> <span class="param-description"> <p>是否将值转换为Immutable类型,默认为false,如果更新的值为object类型建议设置为true</p> </span> </div> <div class="params-box"> <code class="param-name">modelName</code> <span class="type">String</span> <span class="param-description"> <p>model名字,默认是绑定model之后的modelname</p> </span> </div> </div> <table class="table table-bordered params-pc-table"> <tr class='active'><th>参数名</th><th>类型</th><th>标识</th><th>描述</th></tr> <tr class="param"> <td> <code class="param-name">path</code> <td> <span class="type">String</span> <td> </td> <td><div class="param-description"> <p>跟update一样</p> </div> </tr> <tr class="param"> <td> <code class="param-name">data</code> <td> <span class="type">String | object</span> <td> </td> <td><div class="param-description"> <p>需要保存的值,新的值会覆盖之前的值</p> </div> </tr> <tr class="param"> <td> <code class="param-name">isImmutable</code> <td> <span class="type">Boolean</span> <td> </td> <td><div class="param-description"> <p>是否将值转换为Immutable类型,默认为false,如果更新的值为object类型建议设置为true</p> </div> </tr> <tr class="param"> <td> <code class="param-name">modelName</code> <td> <span class="type">String</span> <td> </td> <td><div class="param-description"> <p>model名字,默认是绑定model之后的modelname</p> </div> </tr> </table> </div> <div class="returns"> <h4>Returns:</h4> <div class="returns-description"> <p>Function</p> </div> </div> <div class="example"> <h4>Example:</h4> <ul class="nav nav-tabs example-list"> </ul> <div class="example-content "> <div class="stdoc-code"><pre class="code prettyprint"><code> $Control(TestModel) class TestControl { saveTest(data,dispatch,modelJson,model){ fetch(&#39;/test&#39;).then((data)=&gt;{ this.save(&#39;age&#39;,data.age) }) } }</code></pre> </div> </div> <div class="btn-method-box"> <button class="btn btn-info btn-viewDemo" type="button">查看示例</button> <button class="btn btn-info btn-editDemo" type="button">编辑代码</button> </div> <div class="device"></div> </div> </div> <div id="method_Sync" class="method item"> <h3 class="name">Sync</h3> <code> Sync <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> anywhere </li> </ul><span class="paren">)</span> </div> </code> <span class="returns-inline"> <span class="type"></span> </span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_control.js.html#l184"><code>src&#x2F;control.js:184</code></a> </p> </div> <div class="description well well-small sign-left3"> <div class="stdoc-code"><p>异步操作,<strong style="color:red">IE9以下不建议使用</strong>,Sync是一个装饰器(Decorator),用于装饰Control类中的方法,将原有的方法变成一个异步成功调用后执行结果方法,被装饰的方法需要返回数据或false,决定是否更新store刷新节点。</p> <ul> <li>由Sync装饰后的方法,其作用域为Control,依然可以调用类中其他方法</li> <li>Sync参数error可以为Control中xxxError命名的方法替代,“xxx”命名规则必须与Sync装饰的方法名一致</li> <li>被装饰后的方法在View中调用时传入的参数将已第二个为准,第一个参数将永远是异步执行后的结果</li> <li>被装饰的方法名要和Model类中方法名对应</li> </ul> </div> </div> <div class="params"> <h4>参数:</h4> <div class="clearfix params-wap-table"> <div class="params-box"> <code class="param-name">anywhere</code> <span class="type">Object | String</span> <span class="param-description"> <p>参数为一个字符串时,anywhere为url,当方法拥有2个参数,第一个参数作为url,第二个参数为object类型</p> </span> </div> <div class="params-box"> <code class="param-name">anywhere.dataType</code> <span class="type">String</span> <span class="param-description"> <p>数据返回类型 默认为json</p> </span> </div> <div class="params-box"> <code class="param-name">anywhere.asyn</code> <span class="type">Boolean</span> <span class="param-description"> <p>是否为异步请求,默认为true</p> </span> </div> <div class="params-box"> <code class="param-name">anywhere.method</code> <span class="type">String</span> <span class="param-description"> <p>数据请求方式,默认为GET,可选值有:POST、GET、OPTION、DEL、PUT</p> </span> </div> <div class="params-box"> <code class="param-name">anywhere.timeout</code> <span class="type">Number</span> <span class="param-description"> <p>请求超时时间,可选填</p> </span> </div> <div class="params-box"> <code class="param-name">anywhere.credentials</code> <span class="type">Object</span> <span class="param-description"> <p>跨域是是否要包含cookie值,可选值:include</p> </span> </div> <div class="params-box"> <code class="param-name">anywhere.error</code> <span class="type">Function</span> <span class="param-description"> <p>请求失败回调,可选</p> </span> </div> <div class="params-box"> <code class="param-name">anywhere.header</code> <span class="type">Object</span> <span class="param-description"> <p>包含的请求头,可选</p> </span> </div> <div class="params-box"> <code class="param-name">anywhere.body</code> <span class="type">Object</span> <span class="param-description"> <p>需要传递给服务端的属性字段值,可选</p> </span> </div> <div class="params-box"> <code class="param-name">anywhere.cache</code> <span class="type">Boolean</span> <span class="param-description"> <p>请求数据是否缓存</p> </span> </div> </div> <table class="table table-bordered params-pc-table"> <tr class='active'><th>参数名</th><th>类型</th><th>标识</th><th>描述</th></tr> <tr class="param"> <td> <code class="param-name">anywhere</code> <td> <span class="type">Object | String</span> <td> </td> <td><div class="param-description"> <p>参数为一个字符串时,anywhere为url,当方法拥有2个参数,第一个参数作为url,第二个参数为object类型</p> </div> <table class="table table-bordered"> <tr class='active'><th>参数名</th><th>类型</th><th>标识</th><th>描述</th></tr> <tr class="param"> <td> <code class="param-name">dataType</code> <td> <span class="type">String</span> <td> </td> <td><div class="param-description"> <p>数据返回类型 默认为json</p> </div> </tr> <tr class="param"> <td> <code class="param-name">asyn</code> <td> <span class="type">Boolean</span> <td> </td> <td><div class="param-description"> <p>是否为异步请求,默认为true</p> </div> </tr> <tr class="param"> <td> <code class="param-name">method</code> <td> <span class="type">String</span> <td> </td> <td><div class="param-description"> <p>数据请求方式,默认为GET,可选值有:POST、GET、OPTION、DEL、PUT</p> </div> </tr> <tr class="param"> <td> <code class="param-name">timeout</code> <td> <span class="type">Number</span> <td> </td> <td><div class="param-description"> <p>请求超时时间,可选填</p> </div> </tr> <tr class="param"> <td> <code class="param-name">credentials</code> <td> <span class="type">Object</span> <td> </td> <td><div class="param-description"> <p>跨域是是否要包含cookie值,可选值:include</p> </div> </tr> <tr class="param"> <td> <code class="param-name">error</code> <td> <span class="type">Function</span> <td> </td> <td><div class="param-description"> <p>请求失败回调,可选</p> </div> </tr> <tr class="param"> <td> <code class="param-name">header</code> <td> <span class="type">Object</span> <td> </td> <td><div class="param-description"> <p>包含的请求头,可选</p> </div> </tr> <tr class="param"> <td> <code class="param-name">body</code> <td> <span class="type">Object</span> <td> </td> <td><div class="param-description"> <p>需要传递给服务端的属性字段值,可选</p> </div> </tr> <tr class="param"> <td> <code class="param-name">cache</code> <td> <span class="type">Boolean</span> <td> </td> <td><div class="param-description"> <p>请求数据是否缓存</p> </div> </tr> </table> </td> </tr> </table> </div> <div class="returns">