removed () from english words in display-data.jade.

user-input.jade: review is completed.
_translate.scss: added selector for code within text - to change their font-family for chinese font.
This commit is contained in:
Zhimin YE (Rex) 2016-05-27 14:48:06 +01:00
parent 528bd0cfd4
commit 7ea5c39a47
3 changed files with 21 additions and 19 deletions

View File

@ -204,7 +204,7 @@ figure.image-display
We want to display a list of heroes. We begin by adding a mock heroes name array to the component, We want to display a list of heroes. We begin by adding a mock heroes name array to the component,
just above `myHero`, and redefine `myHero` to be the first name in the array. just above `myHero`, and redefine `myHero` to be the first name in the array.
我们准备显示一个英雄列表。先在组件的`myHero`属性上方添加一个模拟(Mock)的英雄名字数组,然后把`myHero`重定义为数组中的第一个名字。 我们准备显示一个英雄列表。先在组件的`myHero`属性上方添加一个模拟Mock的英雄名字数组然后把`myHero`重定义为数组中的第一个名字。
+makeExample('displaying-data/ts/app/app.component.2.ts', 'mock-heroes', 'app/app.component.ts (类)')(format=".") +makeExample('displaying-data/ts/app/app.component.2.ts', 'mock-heroes', 'app/app.component.ts (类)')(format=".")
:marked :marked
@ -256,7 +256,7 @@ figure.image-display
object. object.
这里我们传给`ngFor`一个“数组”让它显示。 这里我们传给`ngFor`一个“数组”让它显示。
但实际上,`ngFor`可以为任何[可迭代(Iterable)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)对象重复渲染条目。 但实际上,`ngFor`可以为任何[可迭代Iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)对象重复渲染条目。
:marked :marked
Assuming we're still running under the `npm start` command, Assuming we're still running under the `npm start` command,
we should see heroes appearing in an unordered list. we should see heroes appearing in an unordered list.
@ -424,7 +424,7 @@ figure.image-display
- **interpolation** with double curly braces to display a component property - **interpolation** with double curly braces to display a component property
- 用带有双花括号的**插值表达式(Interpolation)**来显示组件的一个属性 - 用带有双花括号的**插值表达式Interpolation**来显示组件的一个属性
- **`ngFor`** to display a list of items - **`ngFor`** to display a list of items

View File

@ -7,7 +7,7 @@ include ../_util-fns
event binding syntax. event binding syntax.
当用户点击链接、按下按钮或者输入文字时我们得知道发生了什么。这些用户动作都会产生DOM事件。 当用户点击链接、按下按钮或者输入文字时我们得知道发生了什么。这些用户动作都会产生DOM事件。
本章中,我们将学如何使用Angular事件绑定语法来绑定这些事件。 本章中,我们将学如何使用Angular事件绑定语法来绑定这些事件。
[Run the live example](/resources/live-examples/user-input/ts/plnkr.html) [Run the live example](/resources/live-examples/user-input/ts/plnkr.html)
@ -26,6 +26,7 @@ include ../_util-fns
As an example, here's an event binding that implements a click handler: As an example, here's an event binding that implements a click handler:
语法非常简单。我们只要把DOM事件的名字包裹在圆括号中然后用一个放在引号中的“模板语句”对它赋值就可以了。 语法非常简单。我们只要把DOM事件的名字包裹在圆括号中然后用一个放在引号中的“模板语句”对它赋值就可以了。
下面的例子中,点击事件被绑定到了一个事件处理方法上:
+makeExample('user-input/ts/app/click-me.component.ts', 'click-me-button')(format=".", language="html") +makeExample('user-input/ts/app/click-me.component.ts', 'click-me-button')(format=".", language="html")
<a id="click"></a> <a id="click"></a>
@ -35,8 +36,8 @@ include ../_util-fns
respond to the click event by calling the component's `onClickMe` method. A [template statement](./template-syntax.html#template-statements) is a subset respond to the click event by calling the component's `onClickMe` method. A [template statement](./template-syntax.html#template-statements) is a subset
of JavaScript with restrictions and a few added tricks. of JavaScript with restrictions and a few added tricks.
等号左边的`(click)`表示把该按钮的click事件作为**绑定目标**。 等号左边的`(click)`表示把该按钮的点击事件作为**绑定目标**。
等号右边,引号中的文本是一个**模板语句**,在这里我们通过调用组件的`onClickMe`方法来响应这个click事件。 等号右边,引号中的文本是一个**模板语句**,在这里我们通过调用组件的`onClickMe`方法来响应这个点击事件。
[模板语句](./template-syntax.html#template-statements)的语法是JavaScript语法的一个受限子集但它也添加了少量“小花招”。 [模板语句](./template-syntax.html#template-statements)的语法是JavaScript语法的一个受限子集但它也添加了少量“小花招”。
When writing a binding we must be aware of a template statement's **execution context**. When writing a binding we must be aware of a template statement's **execution context**.
@ -90,8 +91,8 @@ include ../_util-fns
We then use [interpolation](./template-syntax.html#interpolation) We then use [interpolation](./template-syntax.html#interpolation)
to display the accumulating `values` property back on screen. to display the accumulating `values` property back on screen.
组件的`onKey()`方法是我们从事件对象中提取出用户输入的地方,然后把这个输入加入用户数据的列表,并累加到组件的`values`属性上 组件的`onKey()`方法是用来从事件对象中提取出用户输入的,它把输入的值累加组件的`values`属性里,我们利用这个属性来累计用户数据
最后使用[插值表达式](./template-syntax.html#interpolation)来把存放累加结果的`values`属性回显到屏幕上。 然后我们使用[插值表达式](./template-syntax.html#interpolation)来把存放累加结果的`values`属性回显到屏幕上。
Enter the letters "abc", and then backspace to remove them. Enter the letters "abc", and then backspace to remove them.
Here's what the UI displays: Here's what the UI displays:
@ -117,11 +118,11 @@ figure.image-display
<br>Strong typing reveals a serious problem with passing a DOM event into the method: <br>Strong typing reveals a serious problem with passing a DOM event into the method:
too much awareness of template details, too little separation of concerns. too much awareness of template details, too little separation of concerns.
<br>开启强类型之后暴露出一个严重问题直接把DOM事件对象传给方法会导致过多关心模板细节而关注点分离得太少了。译注比如需要进行丑陋的强制类型转换 <br>使用强类型后我们就能看出直接把DOM事件对象传到方法里的做法有一个严重的问题过多模板细节太少关注点分离。(译注onKey不应该理会模板的实现细节只接收传入字符串。需要强制转换类型是代码的坏味道。)
We'll address this problem in our next try at processing user keystrokes. We'll address this problem in our next try at processing user keystrokes.
我们先记下这个问题,以后再继续尝试处理用户按键 我们将在下次再处理用户按键时处理这个问题
:marked :marked
.l-main-section .l-main-section
@ -169,7 +170,7 @@ figure.image-display
:marked :marked
**This won't work at all unless we bind to an event**. **This won't work at all unless we bind to an event**.
**我们必须绑定到一个事件,否则这将完全无法工作。** **我们必须有一个事件绑定,否则这将完全无法工作。**
Angular only updates the bindings (and therefore the screen) Angular only updates the bindings (and therefore the screen)
if we do something in response to asynchronous events such as keystrokes. if we do something in response to asynchronous events such as keystrokes.
@ -182,7 +183,7 @@ figure.image-display
这就是我们为什么需要把`keyup`事件绑定到一个语句,它做了……好吧,它啥也没做。 这就是我们为什么需要把`keyup`事件绑定到一个语句,它做了……好吧,它啥也没做。
它被绑定到了数字0因为这是我们所能想到的最短语句。 它被绑定到了数字0因为这是我们所能想到的最短语句。
这么做完全是为了讨好Angular。我们认为,还应该有更聪明的方式 这么做完全是为了讨好Angular。我们说过会很聪明
:marked :marked
That template reference variable is intriguing. It's clearly easier to get to the textbox with that That template reference variable is intriguing. It's clearly easier to get to the textbox with that
variable than to go through the `$event` object. Maybe we can rewrite our previous variable than to go through the `$event` object. Maybe we can rewrite our previous
@ -255,6 +256,7 @@ figure.image-display
:marked :marked
## Put it all together ## Put it all together
## 把它们放在一起 ## 把它们放在一起
We learned how to [display data](./displaying-data.html) in the previous chapter. We learned how to [display data](./displaying-data.html) in the previous chapter.
We've acquired a small arsenal of event binding techniques in this chapter. We've acquired a small arsenal of event binding techniques in this chapter.
@ -297,7 +299,7 @@ figure.image-display
simpler. Without the variable, we'd have to use a fancy CSS selector simpler. Without the variable, we'd have to use a fancy CSS selector
to find the input element. to find the input element.
从模板变量中获得元素让按钮的click事件处理变得更简单。 从模板变量中获得元素,可以让按钮的点击click事件处理变得更简单。
如果没有变量我们就不得不使用“奇怪的”CSS选择器来查找这个input元素。 如果没有变量我们就不得不使用“奇怪的”CSS选择器来查找这个input元素。
### Pass values, not elements ### Pass values, not elements
@ -315,7 +317,7 @@ figure.image-display
Instead, we grab the input box *value* and pass *that* to `addHero`. Instead, we grab the input box *value* and pass *that* to `addHero`.
The component knows nothing about HTML or the DOM, which is the way we like it. The component knows nothing about HTML or the DOM, which is the way we like it.
该怎么做呢?我们该取得输入框的*value*,并把它传给`addHero`。 该怎么做呢?我们该取得输入框的*value*,并把它传给`addHero`。
该组件不需要知道关于HTML或DOM的任何知识我们更喜欢这种方式。 该组件不需要知道关于HTML或DOM的任何知识我们更喜欢这种方式。
### Keep template statements simple ### Keep template statements simple
@ -335,7 +337,7 @@ figure.image-display
input box (our design choice). input box (our design choice).
第二条语句的存在理由很充分:在把新的英雄加入列表中之后,我们得清除输入框的值。 第二条语句的存在理由很充分:在把新的英雄加入列表中之后,我们得清除输入框的值。
组件自己做不到这一点,它不能访问输入框(我们的设计就是这样)。 组件自己做不到这一点,它不能访问输入框(我们的设计选择)。
Although the example *works*, we are rightly wary of JavaScript in HTML. Although the example *works*, we are rightly wary of JavaScript in HTML.
Template statements are powerful. We're supposed to use them responsibly. Template statements are powerful. We're supposed to use them responsibly.
@ -343,11 +345,11 @@ figure.image-display
虽然范例*能工作*但我们得对HTML中的JavaScript保持警惕。 虽然范例*能工作*但我们得对HTML中的JavaScript保持警惕。
模板语句很强大,所以我们更得认真负责的使用它们。 模板语句很强大,所以我们更得认真负责的使用它们。
显然在HTML中使用复杂的JavaScript是不负责任的表现。 显然在HTML中使用复杂的JavaScript是不负责任的表现。
Should we reconsider our reluctance to pass the input box into the component? Should we reconsider our reluctance to pass the input box into the component?
我们要重新考虑下是否不得不把输入框传给组件? 我们是否要重新考虑我们的顾虑,把输入框直接传给组件?
There should be a better third way. And there is, as we'll see when we learn about `NgModel` in the [Forms](forms.html) chapter. There should be a better third way. And there is, as we'll see when we learn about `NgModel` in the [Forms](forms.html) chapter.
@ -383,7 +385,7 @@ figure.image-display
我们已经掌握了响应用户输入和操作的基础技术。 我们已经掌握了响应用户输入和操作的基础技术。
虽然这些基础技术确实强大,但在处理大量用户输入时难免显得笨拙。 虽然这些基础技术确实强大,但在处理大量用户输入时难免显得笨拙。
我们正在事件底层操作。我们应该在数据输入字段和模型属性之间建立双向数据绑定。 我们在事件底层操作,但是真正应该做的是:在数据输入字段和模型属性之间建立双向数据绑定。
Angular has a two-way binding called `NgModel`, which we'll learn about Angular has a two-way binding called `NgModel`, which we'll learn about
in the `Forms` chapter. in the `Forms` chapter.

View File

@ -25,6 +25,6 @@ td, th {
} }
} }
body, .main-nav .main-nav-button { body, .main-nav .main-nav-button,.translated-cn code {
font-family: "Helvetica Neue", Arial, STHeiti, "Microsoft YaHei", sans-serif, Helvetica, "DroidSansFallback", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3" !important; font-family: "Helvetica Neue", Arial, STHeiti, "Microsoft YaHei", sans-serif, Helvetica, "DroidSansFallback", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3" !important;
} }