docs: 修改mip bind文档 (#896)

* fix: bind文档说明 * fix: bind文档说明 * fix: bind文档说明 * fix: bind文档说明 * fix: bind文档说明 * fix: bind文档说明
mipengine · Nov 14, 2017 · 0f628ec · 0f628ec
1 parent 58a44ee
commit 0f628ec
Showing 1 changed file with 94 additions and 22 deletions.
diff --git a/src/mip-bind/README.md b/src/mip-bind/README.md
@@ -35,32 +35,70 @@ MIP Bind 是以数据驱动页面更新的功能，开发者通过配置数据
 
 #### 异步数据
 
-如果需要异步数据，则需指定 src 地址（注：src 需要是 https 或 // 协议开头，否则在 https 环境下会出现问题），请求回来的数据会自动合并到数据表里，如：
+如果需要异步数据，则需指定 src 地址（**注：src 需要是 https 或 // 协议开头，否则在 https 环境下会出现问题**），请求回来的数据会自动合并到数据表里，如：
 
 ```
 <mip-data src="https://www.example.org/data"></mip-data>
 ```
 
-当使用这种方式获取异步数据时，**请注意：需要开发者服务端配置 cors 跨站访问，即需要后端在 Response header 中配置 Access-Control-Allow-origin，允许当前域名访问后端服务。**
+当使用这种方式获取异步数据时，**请注意：需要开发者服务端配置 cors 跨站访问，具体步骤如下**：
+
+- 接收到请求后，判断请求头中的 origin 是否是允许的，其中允许的包括 `https://mipcache.bdstatic.com`, `https://站点域名转换的字符串.mipcdn.com` 和开发者站点 origin；
+- 如果 origin 在指定的列表中则设置 response header 中的 `Access-Control-Allow-origin` 为请求接收到的 origin，以 Nodejs 举例，如下所示：
+
+    ```
+    var origins = {
+        'https://mipcache.bdstatic.com': 1,
+        'https://www-mipengine-org.mipcdn.com': 1,
+        'https://www.mipengine.org': 1
+    }
+    app.get('/bind', function (req, res) {
+        var ori = req.headers.origin;
+        if (origins[ori]) {
+            res.header('Access-Control-Allow-Origin', ori);
+            res.json({});
+        }
+    });
+
+    ```
 
 ### 绑定指令
 
 目前绑定数据只支持两种功能：
 
 #### m-bind
 
-绑定元素属性信息。具体格式为 `m-bind:attrs=value`，即：将 attrs 属性值设置为 value，其中 value 为数据源中指定的数据属性名，多层数据可以以 `.` 连接，如：
+绑定元素属性信息。具体格式为 `m-bind:attrs=value`，即：将 attrs 属性值设置为 value，如：
 
-```
-<p m-bind:title="name">姓名</p>
-<p m-bind:title="job.desc">职位信息</p>
+```html
+<mip-data>
+    <script type="application/json">
+    {
+        "placeholder": "请输入内容"
+    }
+    </script>
+</mip-data>
+<mip-form url="https://www.mipengine.org/">
+    <input m-bind:placeholder="placeholder">
+</mip-form>
 ```
 
 #### m-text
-绑定元素 textContent。具体格式为 m-text=value，即：将元素的 textContent 设置为 value 的值，同样 value 为数据源中的属性名，如：
+绑定元素 textContent。具体格式为 m-text=value，即：将元素的 textContent 设置为 value 的值，同样 value 为数据源中的属性名，多层数据可以以 `.` 连接，如：
 
-```
-<p m-text="content"></p>
+```html
+<mip-data>
+    <script type="application/json">
+    {
+        "loc": "北京",
+        "job": {
+            "desc": "互联网从业者"
+        }
+    }
+    </script>
+</mip-data>
+<p>坐标：<span m-text="loc"></span></p>
+<p>职位信息：<span m-text="job.desc"></span></p>
 ```
 
 ### 修改数据
@@ -111,7 +149,7 @@ submitError|提交失败后触发的事件
 
         数据源中所有数据，都可以通过 `m.` 的形式获取到，可直接在组件中通过 js 来进行操作，如：
 
-        ```
+        ```html
         <mip-data>
             <script type="application/json">
             {
@@ -122,8 +160,7 @@ submitError|提交失败后触发的事件
         </mip-data>
 
         <script type="text/javascript">
-            // 打印：张三
-            console.log(m.name);
+            document.body.textContent = m.name;
         </script>
         ```
 - 数据源
@@ -180,18 +217,37 @@ submitError|提交失败后触发的事件
 
     - 支持运算表达式解析，如
 
-        ```
-        <div on="tap:MIP.setData({number:'3*2'})"></div>
-        <div on="tap:MIP.setData({number:'3*m.count'})"></div>
-        ```
+    ```html
+    <mip-data>
+        <script type="application/json">
+        {
+            "price": 20,
+            "count": 2
+        }
+        </script>
+    </mip-data>
+    <div></div>
+    <div m-text="price"></div>
+    <button on="tap:MIP.setData({price:'30'})">30</button>
+    <button on="tap:MIP.setData({price:30*m.count})">30*m.count</button>
+    ```
 
     - 支持 dom 元素解析
 
         mip bind 支持 dom 元素解析，在设置的数据中，可通过 DOM 变量来表示当前事件触发的源 dom 元素，并可通过其获取元素上的属性值等，如：
 
-        ```
-        // change 事件出发后 num 的值被设置为2
-        <input on="change:MIP.setData({num:'DOM.value'})" value=2>
+        ```html
+        <mip-data>
+            <script type="application/json">
+            {
+                "price": 20
+            }
+            </script>
+        </mip-data>
+        <div m-text="price"></div>
+        <mip-form url="https://www.mipengine.org/">
+            <input type='text' on="change:MIP.setData({price:DOM.event*m.price})">
+        </mip-form>
         ```
 
 ### 自定义事件
@@ -210,9 +266,25 @@ btn.addEventListener('blur', function (event) {
     viewer.eventAction.execute('blur', event.target, event);
 }
 ```
-
 此时就可以在 DOM 中通过改事件进行数据的设置
 
 ```
-<div on="blur:MIP.setData({title:'Hello World!'})"></div>
-```
+<mip-data>
+    <script type="application/json">
+    {
+        "title": "Hi"
+    }
+    </script>
+</mip-data>
+<div on="blur:MIP.setData({title:'Hello!'})" m-text="title"></div>
+<mip-form url="https://www.mipengine.org/">
+    <input id="price" type='text'>
+</mip-form>
+<script type="text/javascript">
+    var viewer = require('viewer');
+    var ele = document.querySelector('#price');
+    ele.addEventListener('blur', function (e) {
+        viewer.eventAction.execute('blur', event.target, event);
+    });
+</script>
+```