前端框架Aurelia——组件Component（一）

In Aurelia, user interface components are composed of view and view-model pairs.

组件由html和.ts或者.js文件为一组。

Once instantiated, Aurelia's powerful databinding links the two pieces together allowing changes in your view-model to be reflected in the view and changes in your view to reflected in your view-model. 

一旦组件实例化，双向绑定。

To create a UI component, you need only create two files, one for each of the component parts. Let's create a simple "Hello" component. To do that we'll need a hello.ts for our view-model and hello.html for our view.

hello.html  hello.ts为组件一组文件。

hello.ts

export class Hello {
  firstName: string = 'John';
  lastName: string = 'Doe';

  sayHello() {
    alert(`Hello ${this.firstName} ${this.lastName}. Nice to meet you.`);
  }
}

hello.html

<template>
  <input value.bind="firstName">
  <input value.bind="lastName">

  <button click.trigger="sayHello()">Say Hello</button>
</template>

Simply append .bind to any HTML attribute in the DOM, and Aurelia will bind it to the corresponding property in your view-model.

input的value属性绑定firstName这个变量，firstName这个变量是在view model里面定义的。

The .bind binding command configures the "default binding behavior" for the attribute. For most attributes, this is a one-way binding, where data updates only flow in one direction: from the view-model to the view. However, usually, the behavior you want for form controls is two-way binding so that data not only flows from your view-model into your view, but user input in the view flows back into your view-model.

对大多数属性来说，.bind是单向的数据流，view model流向view。

Those are the defaults, but you can always be explicit about the binding direction by using .one-way, two-way or .one-time in place of .bind (.one-time renders the initial value of the property but does not perform synchronization thereafter, making it a nice memory and performance gain for data you know will not change).

我们可以明确指定单向one-way,双向two-way，一次one-time来替代.bind。一次one-time数据初始化之后就不会改变了。

 Any event, either native or custom, can be bound using .trigger this causes the expression to be invoked when the indicated event is fired.

.trigger来进行事件绑定。无论是原生的还是自定义的事件。