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.`);
}
}
<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来进行事件绑定。无论是原生的还是自定义的事件。