diff --git a/source/_posts/en/tutorial/slot.md b/source/_posts/en/tutorial/slot.md
index 6c4926b..949b255 100644
--- a/source/_posts/en/tutorial/slot.md
+++ b/source/_posts/en/tutorial/slot.md
@@ -1,12 +1,10 @@
---
-title: 插槽
+title: Slots
categories:
- tutorial
---
-
-
-在视图模板中可以通过 slot 声明一个插槽的位置,其位置的内容可以由外层组件定义。
+Templates can contain slots, the contents in which position can be defined by its parent component.
```javascript
var Panel = san.defineComponent({
@@ -28,7 +26,7 @@ var MyComponent = san.defineComponent({
template: '
title
Hello San
@@ -36,13 +34,13 @@ var MyComponent = san.defineComponent({
*/
```
-HTML 标准关于 slot 的描述可以参考 [这里](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#slots)
+Please refer to [the HTML Spec](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#slots) for more information about slots.
-数据环境
+Data Scope
-------
-插入 slot 部分的内容,其数据环境为 **声明时的环境**。
+Inside a slot, the scope is **the parent component's scope**.
```javascript
var Panel = san.defineComponent({
@@ -68,7 +66,7 @@ var MyComponent = san.defineComponent({
}
});
-/* MyComponent渲染结果
+/* Render results for MyComponent
title
I am MyComponent
@@ -76,10 +74,10 @@ var MyComponent = san.defineComponent({
*/
```
-命名
+Named Slots
-----
-通过 name 属性可以给 slot 命名。一个视图模板的声明可以包含一个默认 slot 和多个命名 slot。外层组件的元素通过 `slot="name"` 的属性声明,可以指定自身的插入点。
+Slots can be named by assigning a name attribute. A template can contain one unnamed slot and multiple named slots. By declaring the attribute `slot="name"`, parent components can specify where the contents are placed in.
```javascript
@@ -101,7 +99,7 @@ var MyComponent = san.defineComponent({
+ '
'
});
-/* MyComponent渲染结果
+/* Render results for MyComponent
one
two
@@ -109,7 +107,7 @@ var MyComponent = san.defineComponent({
*/
```
-`注意`:外层组件的替换元素,只有在直接子元素上才能声明 `slot="name"` 指定自身的插入点。下面例子中的 a 元素无法被插入 title slot。
+`Note`: `slot="name"` attribute only takes effect when specified on the direct child of the component element to be injected. The `a` element will NOT be rendered into the `title` slot.
```javascript
var Tab = san.defineComponent({
@@ -130,7 +128,7 @@ var MyComponent = san.defineComponent({
+ '
'
});
-/* MyComponent渲染结果,a 元素无法被插入 title slot
+/* Render results for MyComponent, the `a` element is not injected into the `title` slot
one
twoslot fail
@@ -138,17 +136,16 @@ var MyComponent = san.defineComponent({
*/
```
-插槽指令应用
+Use Cases
-----
-`版本`:>= 3.3.0
-
-在 slot 声明时应用 if 或 for 指令,可以让插槽根据组件数据动态化。
+`Version`: >= 3.3.0
+Slots can be used along with `if` or `for` directives.
-### if指令
+### if Directive
-下面的例子中,panel 的 hidden 属性为 true 时,panel 中默认插槽将不会渲染,仅包含 title 插槽,通过 slot 方法获取的数组长度为 0。
+In the following example, the unnamed slot won't be rendered since the `hidden` attribute for the panel is set to true. The `.slot()` method returns `0`.
```javascript
var Panel = san.defineComponent({
@@ -183,16 +180,16 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果,hidden为true所以不包含default slot
+/* Render results for MyComponent, the unnamed slot is not rendered cause hidden is true
San
*/
```
-### for指令
+### for Directive
-下面的例子没什么用,纯粹为了演示 slot 上应用 for 指令。在后续 **scoped 插槽** 章节中可以看到有意义的场景。
+The following case may not be useful, it's only intended to demonstrate how to use slots along with the `for` directive. There's a real world case latter in the **scoped slots** section.
```javascript
var Panel = san.defineComponent({
@@ -225,7 +222,7 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果,
{{name}}
输出 3 遍
+/* Render results for MyComponent, there's a `
{{name}}
` repeated 3 times
San
San
@@ -236,22 +233,22 @@ var myComponent = new MyComponent({
-scoped 插槽
+Scoped Slots
-----
-如果 slot 声明中包含 **s-bind** 或 1 个以上 **var-** 数据前缀声明,该 slot 为 scoped slot。scoped slot 具有独立的 **数据环境**。
+If there's a **s-bind** attribute or one or more **var-** prefixed attributes specified, the slot is called a scoped slot.
-scoped slot 通常用于组件的视图部分期望由 **外部传入视图结构**,渲染过程使用组件内部数据。
+Scoped slot is useful when the contents is expected to be rendered using **external layouts** with internal data.
-`注意`:scoped slot 中不支持双向绑定。
+`Note`: Bi-directional binding is not supported in scoped slots.
### var
-`版本`:>= 3.3.0
+`Version`: >= 3.3.0
-**var-** 的 scoped 数据声明的形式为 **var-name="expression"**。
+A **var-** prefixed attribute is set in **var-name="expression"** format.
```javascript
@@ -297,7 +294,7 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果
+/* Render results for MyComponent
errorrik
maleerrorrik@gmail.com
@@ -311,12 +308,12 @@ var myComponent = new MyComponent({
### s-bind
-`版本`:>= 3.6.0
+`Version`: >= 3.6.0
-**s-bind** 的 scoped 数据声明的形式为 **s-bind="expression"**。
+A **s-bind** attribute is set in **s-bind="expression"** format.
-当 **s-bind** 和 **var-** 并存时,**var-** 将覆盖整体绑定中相应的数据项。
+When both **s-bind** and **var-** attributes are set, **var-** attributes will hide the corresponding items in **s-bind**.
```javascript
@@ -362,7 +359,7 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果
+/* Render results for MyComponent
errorrik
maleerrorrik@gmail.com
@@ -375,14 +372,14 @@ var myComponent = new MyComponent({
```
-### 访问环境数据
+### Scope Data Access
-`版本`:>= 3.3.1
+`Version`: >= 3.3.1
-scoped slot 中,除了可以访问 **var-** 声明的数据外,还可以访问当前环境的数据。
+Besides data declared by **var-**, scope data is also available in scoped slots.
-- 使用 slot 默认内容时,可以访问组件内部环境数据
-- 外层组件定义的 slot 内容,可以访问外层组件环境的数据
+- When the default contents is used, the internal scope is available
+- When the external contents is used, the external component's scope is available
```javascript
var Man = san.defineComponent({
@@ -416,7 +413,7 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果
+/* Render results for MyComponent
errorrik - HN
@@ -427,13 +424,13 @@ var myComponent = new MyComponent({
```
-动态命名
+Dynamic Naming
-----
-`版本`:>= 3.3.1
+`Version`: >= 3.3.1
-slot 声明中,组件可以使用当前的数据环境进行命名,从而提供动态的插槽。插槽的动态命名常用于 **组件结构根据数据生成** 的场景下,比如表格组件。
+Slots can be named using data from the current scope to provide dynamic slots, which is useful in cases when **the layouts are generated from data**, for example, the table components.
```javascript
var Table = san.defineComponent({
@@ -467,8 +464,8 @@ var MyComponent = san.defineComponent({
var myComponent = new MyComponent({
data: {
columns: [
- {name: 'name', label: '名'},
- {name: 'email', label: '邮'}
+ {name: 'name', label: 'N'},
+ {name: 'email', label: 'E'}
],
list: [
{name: 'errorrik', email: 'errorrik@gmail.com'},
@@ -477,13 +474,13 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果
+/* Render results for MyComponent
- 名 |
- 邮 |
+ N |
+ E |
@@ -501,6 +498,6 @@ var myComponent = new MyComponent({
*/
```
-`注意`:表格的视图更新在 IE 下可能存在兼容性问题。
+`Note`: There're compatibility issues with table updating in IE.
diff --git a/source/_posts/tutorial/slot.md b/source/_posts/tutorial/slot.md
index 6c4926b..bd7f4a0 100644
--- a/source/_posts/tutorial/slot.md
+++ b/source/_posts/tutorial/slot.md
@@ -28,7 +28,7 @@ var MyComponent = san.defineComponent({
template: 'Hello San
'
});
-/* MyComponent渲染结果
+/* MyComponent 渲染结果
title
Hello San
@@ -68,7 +68,7 @@ var MyComponent = san.defineComponent({
}
});
-/* MyComponent渲染结果
+/* MyComponent 渲染结果
title
I am MyComponent
@@ -101,7 +101,7 @@ var MyComponent = san.defineComponent({
+ '
'
});
-/* MyComponent渲染结果
+/* MyComponent 渲染结果
one
two
@@ -130,7 +130,7 @@ var MyComponent = san.defineComponent({
+ '
'
});
-/* MyComponent渲染结果,a 元素无法被插入 title slot
+/* MyComponent 渲染结果,a 元素无法被插入 title slot
one
twoslot fail
@@ -138,7 +138,7 @@ var MyComponent = san.defineComponent({
*/
```
-插槽指令应用
+插槽的应用
-----
`版本`:>= 3.3.0
@@ -183,7 +183,7 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果,hidden为true所以不包含default slot
+/* MyComponent 渲染结果,hidden为true所以不包含default slot
San
@@ -225,7 +225,7 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果,
{{name}}
输出 3 遍
+/* MyComponent 渲染结果,
{{name}}
输出 3 遍
San
San
@@ -297,7 +297,7 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果
+/* MyComponent 渲染结果
errorrik
maleerrorrik@gmail.com
@@ -362,7 +362,7 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果
+/* MyComponent 渲染结果
errorrik
maleerrorrik@gmail.com
@@ -416,7 +416,7 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果
+/* MyComponent 渲染结果
errorrik - HN
@@ -477,7 +477,7 @@ var myComponent = new MyComponent({
}
});
-/* MyComponent渲染结果
+/* MyComponent 渲染结果