前端框架Aurelia - Binding Checkbox

1.checkedBind a boolean property to an input element's 

checked

 attribute using 

checked.bind="myBooleanProperty"

.绑定一个bool类型的值给checked属性来决定checkbox是否check。

export class App {
motherboard = false;
cpu = false;
memory = false;
}

<template>
<form>
<h4>Products</h4>
<label><input type="checkbox" checked.bind="motherboard">  Motherboard</label>
<label><input type="checkbox" checked.b

ind="cpu"> CPU</label> <label><input type="checkbox" checked.bind="memory"> Memory</label> motherboard = ${motherboard}<br/> cpu = ${cpu}<br/> memory = ${memory}<br/> </form></template>

2.Array of Numbers

A
set of checkbox elements is a multiple selection interface. If you have an array that serves as the "selected items" list, you can bind the array to each input's 

checked

 attribute.
The binding system will track the input's checked status, adding the input's value to the array when the input is checked and removing the input's value from the array when the input is unchecked.

//下面这段翻译还是挺666的，讲道理
binding系统会追踪input的checked状态，当input被选中的时候，input的value会被加入到array中,在这里，我们将checked和数组selectedProductIds绑定，那么当input被check时，input的value就会被加入到selectedProductIds数组中，那么为了定义input的value，bind
input的model属性。model.bind="product.id"；当input被unchecked，input的value会被remove。

app.ts

export interface IProduct {
id: number;
name: string;
}

export class App {
products: IProduct[] = [
{ id: 0, name: 'Motherboard' },
{ id: 1, name: 'CPU' },
{ id: 2, name: 'Memory' },
];

selectedProductIds: number[] = [];
}

app.html

<template>
<form>
<h4>Products</h4>
<label repeat.for="product of products">
<input type="checkbox" model.bind="product.id" checked.bind="selectedProductIds">
${product.id} - ${product.name}
</label>
<br />
Selected product IDs: ${selectedProductIds}
</form>
</template>

3.Array of Objects

Numbers
aren't the only type of value you can store in a "selected items" array. The binding system supports all types, including objects. Here's an example that adds and removes "product" objects from a 

selectedProducts

 array
using the checkbox data-binding.

//下面这段翻译还是挺666的，讲道理
就是章节2我们选中checkbox，存到checkbox绑定的数组里面的值是number（这里文档将这个数组叫做这个checkbox的store），呵呵，狐狸尾巴终于露出来了吧。言归正传，说的是不仅可以存number到这个store里面，还可以存object到这个store里面。

export interface IProduct {
id: number;
name: string;
}

export class App {
products: IProduct[] = [
{ id: 0, name: 'Motherboard' },
{ id: 1, name: 'CPU' },
{ id: 2, name: 'Memory' },
];

selectedProducts: IProduct[] = [];
}

<template>
<form>
<h4>Products</h4>
<label repeat.for="product of products">
<input type="checkbox" model.bind="product" checked.bind="selectedProducts">
${product.id} - ${product.name}
</label>

Selected products:
<ul>
<li repeat.for="product of selectedProducts">${product.id} - ${product.name}</li>
</ul>
</form>
</template>

4.Array of Objects with Matcher

You
may run into situations where the object your input element's model is bound to does not have reference equality to any of the objects in your checked array. The objects might match by id, but they may not be the same object instance. To support this scenario
you can override Aurelia's default "matcher" which is a equality comparison function that looks like this: 

(a,
b) => a === b

. You can substitute a function of your choosing that
has the right logic to compare your objects.

页面刚进来的时候就会走matcher.bind里面绑定的方法。然后会把这个input自己绑定的model（model就是它的值）那个对象和checked.bind里面的那个数组store进行match，如果有匹配的话，那么页面刷新的时候就会check这个checkbox。如果没有就不会check这个checkbox。

发现checkbox是多选的checkbox

export interface IProduct {
id: number;
name: string;
}

export class App {
selectedProducts: IProduct[] = [
{ id: 1, name: 'CPU' },
{ id: 2, name: 'Memory' }
];

productMatcher = (a, b) => a.id === b.id;
}

<template>
<form>
<h4>Products</h4>
<label>
<input type="checkbox" model.bind="{ id: 0, name: 'Motherboard' }"
matcher.bind="productMatcher"
checked.bind="selectedProducts">
Motherboard
</label>
<label>
<input type="checkbox" model.bind="{ id: 1, name: 'CPU' }"
matcher.bind="productMatcher"
checked.bind="selectedProducts">
CPU
</label>
<label>
<input type="checkbox" model.bind="{ id: 2, name: 'Memory' }"
matcher.bind="productMatcher"
checked.bind="selectedProducts">
Memory
</label>

Selected products:
<ul>
<li repeat.for="product of selectedProducts">${product.id} - ${product.name}</li>
</ul>
</form>
</template>

5.Array of Strings

This
is example is unique because it does not use 

model.bind

 to
assign each checkbox's value.

这个例子不像前面的例子一样是用model.bind来给checkbox分配值。
Instead
the input's standard 

value

 attribute
is used.

而是value这个属性的使用。
Normally
we cannot use the standard 

value

 attribute
in conjunction with checked binding because it coerces anything it's assigned to a string. 

通常我们不能使用value属性来连接checked binding，因为它会强制assign给它的任何值都要是string。
This
example uses an array of strings so everything works just fine.

这个例子使用一个数组。数组的元素都是string。这样分配给每个input的value.bind的值都是string，所以可以使用。

export class App {
products: string[] = ['Motherboard', 'CPU', 'Memory'];
selectedProducts: string[] = [];
}

<template>
<form>
<h4>Products</h4>
<label repeat.for="product of products">
<input type="checkbox" value.bind="product" checked.bind="selectedProducts">
${product}
</label>
<br />
Selected products: ${selectedProducts}
</form>
</template>