diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade index c1a703ca30..7720f539bb 100644 --- a/public/docs/ts/latest/guide/displaying-data.jade +++ b/public/docs/ts/latest/guide/displaying-data.jade @@ -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, 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=".") :marked @@ -256,7 +256,7 @@ figure.image-display object. 这里我们传给`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 Assuming we're still running under the `npm start` command, 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)**来显示组件的一个属性 + - 用带有双花括号的**插值表达式Interpolation**来显示组件的一个属性 - **`ngFor`** to display a list of items diff --git a/public/docs/ts/latest/guide/user-input.jade b/public/docs/ts/latest/guide/user-input.jade index ce95d0d9d5..3871d186de 100644 --- a/public/docs/ts/latest/guide/user-input.jade +++ b/public/docs/ts/latest/guide/user-input.jade @@ -7,7 +7,7 @@ include ../_util-fns event binding syntax. 当用户点击链接、按下按钮或者输入文字时,我们得知道发生了什么。这些用户动作都会产生DOM事件。 - 本章中,我们将学会如何使用Angular事件绑定语法来绑定这些事件。 + 本章中,我们将学习如何使用Angular事件绑定语法来绑定这些事件。 [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: 语法非常简单。我们只要把DOM事件的名字包裹在圆括号中,然后用一个放在引号中的“模板语句”对它赋值就可以了。 + 下面的例子中,点击事件被绑定到了一个事件处理方法上: +makeExample('user-input/ts/app/click-me.component.ts', 'click-me-button')(format=".", language="html") @@ -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 of JavaScript with restrictions and a few added tricks. - 等号左边的`(click)`表示把该按钮的click事件作为**绑定目标**。 - 等号右边,引号中的文本是一个**模板语句**,在这里我们通过调用组件的`onClickMe`方法来响应这个click事件。 + 等号左边的`(click)`表示把该按钮的点击事件作为**绑定目标**。 + 等号右边,引号中的文本是一个**模板语句**,在这里我们通过调用组件的`onClickMe`方法来响应这个点击事件。 [模板语句](./template-syntax.html#template-statements)的语法是JavaScript语法的一个受限子集,但它也添加了少量“小花招”。 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) to display the accumulating `values` property back on screen. - 组件的`onKey()`方法是我们从事件对象中提取出用户输入的地方,然后把这个输入加入用户数据的列表,并累加到组件的`values`属性上。 - 最后使用[插值表达式](./template-syntax.html#interpolation)来把存放累加结果的`values`属性回显到屏幕上。 + 组件的`onKey()`方法是用来从事件对象中提取出用户输入的,它把输入的值累加组件的`values`属性里,我们利用这个属性来累计用户数据。 + 然后我们使用[插值表达式](./template-syntax.html#interpolation)来把存放累加结果的`values`属性回显到屏幕上。 Enter the letters "abc", and then backspace to remove them. Here's what the UI displays: @@ -117,11 +118,11 @@ figure.image-display
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. -
开启强类型之后暴露出一个严重问题:直接把DOM事件对象传给方法会导致过多关心模板细节,而关注点分离得太少了。(译注:比如需要进行丑陋的强制类型转换) +
使用强类型后,我们就能看出直接把DOM事件对象传到方法里的做法有一个严重的问题:过多模板细节,太少关注点分离。(译注:onKey不应该理会模板的实现细节,只接收传入字符串。需要强制转换类型是代码的坏味道。) We'll address this problem in our next try at processing user keystrokes. - 我们先记下这个问题,以后再继续尝试处理用户按键。 + 我们将在下次再处理用户按键时处理这个问题。 :marked .l-main-section @@ -169,7 +170,7 @@ figure.image-display :marked **This won't work at all unless we bind to an event**. - **我们必须绑定到一个事件,否则这将完全无法工作。** + **我们必须有一个事件绑定,否则这将完全无法工作。** Angular only updates the bindings (and therefore the screen) if we do something in response to asynchronous events such as keystrokes. @@ -182,7 +183,7 @@ figure.image-display 这就是我们为什么需要把`keyup`事件绑定到一个语句,它做了……好吧,它啥也没做。 它被绑定到了数字0,因为这是我们所能想到的最短语句。 - 这么做完全是为了讨好Angular。我们认为,还应该有更聪明的方式! + 这么做完全是为了讨好Angular。我们说过会很聪明! :marked 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 @@ -255,6 +256,7 @@ figure.image-display :marked ## Put it all together ## 把它们放在一起 + 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. @@ -297,7 +299,7 @@ figure.image-display simpler. Without the variable, we'd have to use a fancy CSS selector to find the input element. - 从模板变量中获得元素让按钮的click事件处理变得更简单。 + 从模板变量中获得元素,可以让按钮的点击click事件处理变得更简单。 如果没有变量,我们就不得不使用“奇怪的”CSS选择器来查找这个input元素。 ### Pass values, not elements @@ -315,7 +317,7 @@ figure.image-display 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. - 该怎么做呢?我们该取得输入框的*value*,并把它传给`addHero`。 + 该怎么做呢?我们该取得输入框的*值value*,并把它传给`addHero`。 该组件不需要知道关于HTML或DOM的任何知识,我们更喜欢这种方式。 ### Keep template statements simple @@ -335,7 +337,7 @@ figure.image-display input box (our design choice). 第二条语句的存在理由很充分:在把新的英雄加入列表中之后,我们得清除输入框的值。 - 组件自己做不到这一点,它不能访问输入框(我们的设计就是这样)。 + 组件自己做不到这一点,它不能访问输入框(我们的设计选择)。 Although the example *works*, we are rightly wary of JavaScript in HTML. Template statements are powerful. We're supposed to use them responsibly. @@ -343,11 +345,11 @@ figure.image-display 虽然范例*能工作*,但我们得对HTML中的JavaScript保持警惕。 模板语句很强大,所以我们更得认真负责的使用它们。 - 但显然,在HTML中使用复杂的JavaScript是不负责任的表现。 + 显然,在HTML中使用复杂的JavaScript是不负责任的表现。 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. @@ -383,7 +385,7 @@ figure.image-display 我们已经掌握了响应用户输入和操作的基础技术。 虽然这些基础技术确实强大,但在处理大量用户输入时难免显得笨拙。 - 我们正在事件底层操作。我们应该在数据输入字段和模型属性之间建立双向数据绑定。 + 我们在事件底层操作,但是真正应该做的是:在数据输入字段和模型属性之间建立双向数据绑定。 Angular has a two-way binding called `NgModel`, which we'll learn about in the `Forms` chapter. diff --git a/public/resources/css/_translate.scss b/public/resources/css/_translate.scss index 2622468bc1..437eca1fb7 100644 --- a/public/resources/css/_translate.scss +++ b/public/resources/css/_translate.scss @@ -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; }