前端框架Aurelia

1.HTML and SVG Attributes

Aurelia supports binding HTML and SVG attributes to JavaScript expressions. Attribute binding declarations have three parts: attribute.command="expression".

• attribute: an HTML or SVG attribute name.
• command: one of Aurelia's attribute binding commands:
  • one-time: flows data one direction: from the view-model to the view, once.
  • one-way: flows data one direction: from the view-model to the view.
  • two-way: flows data both ways: from view-model to view and from view to view-model.
  • bind: automically chooses the binding mode. Uses two-way binding for form controls and one-way binding for almost everything else.
• expression: a JavaScript expression.

one-time: 数据单向，从VM到view， 一次

one-way： 数据单向，从VM到view，单向绑定

two-way： 双向绑定

bind： 自动选择绑定模式。表单控件是双向绑定， 其他基本上是单向。

expression：js表达式。

Typically you'll use the bind command since it does what you intend most of the time. Consider using one-time in performance critical situations where the data never changes because it skips the overhead of observing the view-model for changes. Below are a few examples.

<input type="text" value.bind="firstName"><input type="text" value.two-way="lastName"><a class="external-link" href.bind="profile.blogUrl">Blog</a><a class="external-link" href.one-way="profile.twitterUrl">Twitter</a><a class="external-link" href.one-time="profile.linkedInUrl">LinkedIn</a>

The first input uses the bind command which will automatically create two-way bindings for input value attribute bindings. The second input uses the two-way command which explicitly sets the binding mode. The first anchor element uses the bind command which will automatically create a one-way binding for anchor href attributes. The other two anchor elements use the one-way and one-time commands to explicitly set the binding's mode.

a标签如果用bind是单向数据绑定。这个和上面的总结相符。

表单控件是双向绑定， 其他基本上是单向。

2.DOM Events

The binding system supports binding to DOM events. A DOM event binding will execute a JavaScript expression whenever the specified DOM event occurs. Event binding declarations have three parts: event.command="expression".

• event: the name of a DOM event, without the "on" prefix.
• command: one of Aurelia's event binding commands:
  • trigger: attaches an event handler directly to the element. When the event fires, the expression will be invoked.
  • delegate: attaches a single event handler to the document (or nearest shadow DOM boundary) which handles all events of the specified type, properly dispatching them back to their original targets for invocation of the associated expression.
• expression: a JavaScript expression. Use the special $event property to access the DOM event in your binding expression.

event： 没有on前缀

trigger：event handler直接绑定元素，event激活，js表达式调用。

delegate：是将一个event handler绑定到document上，handle所有这个类型的event，如click，然后再分配event到原来的目标来调用相关联的表达式。

expression： $event属性来访问binging表达式里的DOM event

<button type="button" click.trigger="cancel()">Cancel</button><button type="button" click.delegate="select('yes')">Yes</button><button type="button" click.delegate="select('no')">No</button><input type="text" blur.trigger="elementBlurred($event.target)">  

<input type="text" change.delegate="lastName = $event.target.value">

The yes and no buttons use the delegatecommand which will use the event delegation pattern. 

注意：yes和no这两个button用的是delegate，由delegate来分配调度。

The input elements have binding expressions that use the special $event property to access the DOM event .

$event属性来访问binging表达式里的DOM event。

3.Function References

While developing custom elements or custom attributes you may encounter a situation where you have a @bindable property that expects a reference to a function.

前提：当开发自定义元素或者自定义属性时，可绑定的属性需要函数的引用。

Use the call binding command to declare and pass a function to the bindable property.

我们用call命令绑定函数到属性上。

The call command is superior to the bind command for this use-case because it will execute the function in the correct context, ensuring this is what you expect it to be.

call比bind好。

<my-element go.call="doSomething()"></my-element><input type="text" value.bind="taskName"><my-element go.call="doSomething(taskName)"></my-element>

Your custom element or attribute can invoke the function that was passed to the @bindable property using standard call syntax: this.go();. If you need to invoke the function with arguments, create an object whose keys are the argument names and whose values are the argument values, then invoke the function with this "arguments object". The object's properties will be available for data-binding in the call binding expression. For example, invoking the function with this.go({ x: 5, y: -22, z: 11}) will make x, y and z available for binding:

自定义的元素和属性，用go方法绑定函数和属性。

如果函数里面有参数，this.go({ x: 5, y: -22, z: 11})，三个参数都被绑定了。

4.Referencing Elements

Use the ref binding command to create a reference to a DOM element. 

用ref创建一个指向这个DOM element的引用。

<template>  <input type="text" ref="nameInput"> ${nameInput.value}</template>

The ref command has several qualifiers you can use in conjunction with custom elements and attributes:

• element.ref="expression": create a reference to the DOM element (same as ref="expression").
• 创建一个指向这个DOM element的引用
• attribute-name.ref="expression": create a reference to a custom attribute's view-model.
• 创建一个指向自定义属性所在的view model的引用
• view-model.ref="expression": create a reference to a custom element's view-model.
• 创建一个指向自定义元素所在的view model的引用
• view.ref="expression": create a reference to a custom element's view instance (not an HTML Element).
• 创建一个指向自定义元素的view 实例的引用
• controller.ref="expression": create a reference to a custom element's controller instance.
• 创建一个指向自定义元素的controller 实例的引用

注意这个例子ref是用在template上，所以这里说you can use in conjunction with custom elements and attributes: