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:
parent
528bd0cfd4
commit
7ea5c39a47
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue