diff --git a/docs/en_loop.md b/docs/en_loop.md
new file mode 100644
index 000000000..1c4a444a7
--- /dev/null
+++ b/docs/en_loop.md
@@ -0,0 +1,88 @@
+<h2 id="Loop">Loop</h2>
+
+The following describes how to traverses in mustache.js and javascript.
+
+### First Option
+
+```js
+class List extends Omi.Component {
+    constructor(data) {
+        super(data);
+    }
+
+    render () {
+        return `<div>
+                    <ul> {{#items}} <li id="{{id}}">{{text}}</li> {{/items}}</ul>
+                </div>`;
+    }
+}
+
+Omi.render(new List({
+    items: [
+        {id: 1, text: 'Omi'},
+        {id: 2, text: 'dntzhang'},
+        {id: 3, text: 'AlloyTeam'}
+    ]
+}),"body");
+```
+
+Mustache.js more detailed loop traversal use can see 
+
+For more details for traversal in mustache.js please view [https://github.com/janl/mustache.js#non-empty-lists](https://github.com/janl/mustache.js#non-empty-lists).
+
+For example, it also support:
+
+- If each item of items is a string, you can directly use **{{.}}** to output each item
+- Call the defined function when looping
+
+<a href="http://alloyteam.github.io/omi/website/redirect.html?type=list" target="_blank">Click me for the live demo</a>
+
+### Second Option
+
+```js
+class List extends Omi.Component {
+    constructor(data) {
+        super(data);
+    }
+
+    render() {
+        return `<div>
+                    <ul>
+                    ` + this.data.items.map(item =>
+                        '<li id="' + item.id + '">' + item.text + '</li>'
+                    ).join("") + `
+                    </ul>
+                </div>`;
+    }
+}
+
+Omi.render(new List({
+    items: [
+        {id: 1, text: 'Omi'},
+        {id: 2, text: 'dntzhang'},
+        {id: 3, text: 'AlloyTeam'}
+    ]
+}),"body");
+```
+
+Of course, you can also use template string inside the `map`
+
+```js
+...
+render() {
+    return `<div>
+                <ul>
+                ` + this.data.items.map(item =>
+                    `<li id="${item.id}">${item.text}</li>`
+                ).join("") + `
+                </ul>
+            </div>`;
+}
+...
+```
+
+You will see the following page:
+
+![pv](http://images2015.cnblogs.com/blog/105416/201701/105416-20170122095724129-2059595233.png)
+
+<a href="http://alloyteam.github.io/omi/website/redirect.html?type=list2" target="_blank">Click me for the live demo</a>
\ No newline at end of file
diff --git a/website/js/config.js b/website/js/config.js
index 7174873e6..e372ea105 100644
--- a/website/js/config.js
+++ b/website/js/config.js
@@ -25,7 +25,7 @@
     },
     mds:{
         cn:['installation', 'hello_world', 'components', 'communication', 'lifecycle', 'events', 'condition', 'loop', 'form', 'inherit', 'template', 'get_dom','plugin', 'thinking_in_omi','pr_env','pr_hello'],
-        en:['installation', 'hello_world', 'components', 'communication', 'lifecycle', 'events', 'condition']
+        en:['installation', 'hello_world', 'components', 'communication', 'lifecycle', 'events', 'condition', 'loop']
     },
     menus:{
         cn:[
@@ -63,7 +63,8 @@
                 {"name": "Communication"},
                 {"name": "Lifecycle"},
                 {"name": "Handling Events"},
-                {"name": "Conditional Rendering"}
+                {"name": "Conditional Rendering"},
+                {"name": "Loop"}
                 //{"name": "Lists and Keys"},
                 //{"name": "Forms"},
                 //{"name": "Inheritance"},