gfs-react-dm
Version:
简化react和redux的繁杂流程，更简单的数据操作管理
327 lines (206 loc) • 10.1 kB
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>Model - 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>Model</h1>
</div>
<div class="well well-small sign-left3">
<div class="stdoc-code"><p>实体、数据模型，model中的方法和属性都该设置成静态类型</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_model.js.html#l3"><code>src/model.js:3</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_Model" class="method item">
<h3 class="name">Model</h3>
<code>
Model
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
target
</li>
</ul><span class="paren">)</span>
</div>
</code>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_model.js.html#l110"><code>src/model.js:110</code></a>
</p>
</div>
<div class="description well well-small sign-left3">
<div class="stdoc-code"><p>一个类装饰器，被装饰的类会变成store，默认不需要额外提供对数据操作的方法，在control中默认会提供del、update、insert等数据操作方法；如果有特殊需求无法满足使用场景可按照example中给出的方式自行编写数据处理方法<br />
<strong style="color:red">注意：model类中<code>__name</code>属性必须要有，这是为了能在各个component正常使用model必备的一个属性,必须小写，默认会在字符串后面添加上"model",例如：<code>static __name='test'</code>,那么在实际中运用应该是this.props.testmodel</strong></p>
</div>
</div>
<div class="params">
<h4>参数:</h4>
<div class="clearfix params-wap-table">
<div class="params-box">
<code class="param-name">target</code>
<span class="type">Object</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">target</code>
<td> <span class="type">Object</span>
<td>
</td>
<td><div class="param-description">
<p>被包装的对象</p>
</div>
</tr>
</table>
</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 {Model} from 'gfs-react-mvc'
//这里由于@为文档关键符号，所以下面将以$代替
//@Model
$Model
class TestModel {
//__name必须要有，这是为了能再各个component正常使用model必备的一个属性,必须小写
static __name = 'testmodel'
//数据模型
static age = 20
static xq = {}
//可以自行定义数据操作方法，在control中通过
//dispatch({
// type:<code>testmodel$$save</code>,
// data:data
//})
//这种方式变更数据，其中type值的组成是通过：类名（全小写）+ 方法名组成
static save(data, action){
if(action.data){
return data.merge(Immutable.fromJS(action.data) )
}
}
//dispatch({
// type:<code>testmodel$$del</code>,
// data:data
//})
static del(data, action){
if(action.data){
return data.merge(Immutable.fromJS(action.data) )
}
}
}</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>
</div>
</div>
</div>
</div>
</div>
</div>
<a id="gotoTop" class='well well-small' href='#'>
</a>
<script src="../assets/vendor/jquery/jquery-1.8.2.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.js"></script>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script src="../assets/js/config.js"></script>
<script src="../assets/js/doc.js"></script>
</body>
</html>