-
Notifications
You must be signed in to change notification settings - Fork 79
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
translation: tutorial/if.md #71
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
--- | ||
title: 条件 | ||
title: Conditional Rendering | ||
categories: | ||
- tutorial | ||
--- | ||
|
@@ -8,43 +8,43 @@ categories: | |
s-if | ||
------ | ||
|
||
通过 **s-if** 指令,我们可以为元素指定条件。当条件成立时元素可见,当条件不成立时元素不存在。 | ||
**s-if** directive can be used for conditional rendering. The element will be rendered if and only if the condition is evaluated as true. | ||
|
||
`提示`:当不满足条件时,San 会将元素从当前页面中移除,而不是隐藏。 | ||
`Note`: The element will be removed rather than hidden when the condition is not satisfied. | ||
|
||
```html | ||
<span s-if="isOK">Hello San!</span> | ||
``` | ||
|
||
**s-if** 指令的值可以是任何类型的[表达式](../template/#表达式)。 | ||
The [expression](../template/#Expression) for **s-if** can be of any type. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 当前的这个翻译,给人的感觉是“if的表达式可以返回任何类型”,和上面的“要boolean”有点冲突 |
||
|
||
```html | ||
<span s-if="isReady && isActive">Hello San!</span> | ||
``` | ||
|
||
`提示`:San 的条件判断不是严格的 === false。所以,一切 JavaScript 的假值都会认为条件不成立:0、空字符串、null、undefined、NaN等。 | ||
`Note`:All JavaScript falsy values are considered false: 0, empty string, null, undefined, NaN, etc. | ||
|
||
s-elif | ||
------ | ||
|
||
`> 3.2.3` | ||
|
||
**s-elif** 指令可以给 **s-if** 增加一个额外条件分支块。**s-elif** 指令的值可以是任何类型的[表达式](../template/#表达式)。 | ||
**s-elif** directive can be used to add a conditional branch for **s-if**. The [expression](../template/#Expression) for **s-elif** can be of any type. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. conditional branch -> condition branch There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 后面半句同上 |
||
|
||
```html | ||
<span s-if="isActive">Active</span> | ||
<span s-elif="isOnline">Pending</span> | ||
``` | ||
|
||
`提示`:**s-elif** 指令元素必须跟在 **s-if** 或 **s-elif** 指令元素后,否则将抛出 **elif not match if** 的异常。 | ||
`Note`:**s-elif** element must immediately follow a **s-if** or **s-elif** element. An **elif not match if** exception will be thrown if used otherwise. | ||
|
||
|
||
s-else-if | ||
------ | ||
|
||
`> 3.5.6` | ||
|
||
**s-else-if** 指令是 **s-elif** 指令的别名,效果相同。 | ||
**s-else-if** directive is an alias for **s-elif** directive, they're effectively the same. | ||
|
||
```html | ||
<span s-if="isActive">Active</span> | ||
|
@@ -55,20 +55,20 @@ s-else-if | |
s-else | ||
------ | ||
|
||
**s-else** 指令可以给 **s-if** 增加一个不满足条件的分支块。**s-else** 指令没有值。 | ||
**s-else** directive can be used to specify a condition-not-satisfied branch for **s-if**. **s-else** have no value. | ||
|
||
```html | ||
<span s-if="isOnline">Hello!</span> | ||
<span s-else>Offline</span> | ||
``` | ||
|
||
`提示`:**s-else** 指令元素必须跟在 **s-if** 或 **s-elif** 指令元素后,否则将抛出 **else not match if** 的异常。 | ||
`Note`:**s-else** element must immediately follow a **s-if** or **s-elif** element. An **else not match if** exception will be thrown if used otherwise. | ||
|
||
|
||
虚拟元素 | ||
Virtual Element | ||
------ | ||
|
||
在 san 中,template 元素在渲染时不会包含自身,只会渲染其内容。对 template 元素应用 if 指令能够让多个元素同时根据条件渲染视图,可以省掉一层不必要的父元素。 | ||
In san templates, only contents of **template** are rendered, NOT including the **template** element itself. By applying an **if** directive for **template** element, multiple elements (without a redundant parent element) can be rendered regarding to the **if** condition. | ||
|
||
```html | ||
<div> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is evaluated as true -> evaluates to