前端框架Aurelia

1.Introduction

A group of radio inputs is a type of "single select" interface.

单选按钮。

Aurelia supports two-way binding any type of property to a group of radio inputs.

Aurelia支持双向绑定任何类型的属性与单选按钮双向绑定。

The examples below illustrate binding number, object, string and boolean properties to sets of radio inputs. In each of the examples there's a common set of steps

例子是绑定number，object，string， boolean属性到单选按钮。

1. Group the radios via the name property. Radio buttons that have the same value for the name attribute are in the same "radio button group"; only one radio button in a group can be selected at a time.

       一组单选按钮的名字要一样，这样只有一个单选按钮才能被选中。

   2.Define each radio's value using the model property.

和checkbox一样，我们用model属性的值来作为每一个单选按钮的值。注意，是每一个radio都有自己的model属性，都有自己的value。

   3.Two-way bind each radio's checked attribute to a "selected item" property on the view-model.

我们在view model里面有一个selected item property，比如上一节checkbox，就是一个数组，同样的radio在view model里面也有同样的数据存放处，这个“数组”我们和checked属性绑定，相当于整组radios的store。

2.Numbers

Let's start with an example that uses a numeric "selected item" property

来来来第一个例子是radios的store里面放的是number。

 In this example each radio input will be assigned a number value via the model property.

每个radio通过model属性被分配一个number value。

Selecting a radio will cause it's model value to be assigned to the selectedProductId property.

选择一个radio会导致他的model value被分配到view model里面的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' },  ];  selectedProductId: number = null;}

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

3.Objects

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

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

个人觉得逻辑是这样的： 1.当页面初始化的时候，model.bind使得第三个radio button的value值被绑定为product这个object

2.当这个radio button被checked的时候，由于表单控件的绑定是双向绑定，所以这个radio button的value（也就是model绑定的值，就是那个Product对象），就给了selectedProduct这个变量。

4.Objects with Matcher

Matcher属性的作用其实是这样的，例如下面的例子，matcher.bind绑定的是productMatcher这个view model里面的方法。然后这个方法是按照id来去匹配的，那么其实是这个意思，这个方法会根据selectedProduct里面的数据和哪些控件有matcher.bind = "productMatcher"这个东西来进行匹配。

具体的匹配流程是这样的：

如果view model里面的数据有比如selectedProduct: IProduct ={ id:1, name:'CPU'};

  然后三个input都有matcher.bind="productMatcher"，那么这个方法会对所有的控件进行id的匹配，匹配到的就会在页面刷新的时候check住这个ratio button，

所以如果我们把代码改成下面这样：

<template>  <form>    <h4>Products</h4>    <label>      <input type="radio" name="group3"             model.bind="{ id: 0, name: 'Motherboard' }"             matcher.bind="productMatcher"             checked.bind="selectedProduct">      Motherboard    </label>    <label>      <input type="radio" name="group3"             model.bind="{ id: 1, name: 'CPU' }"  //删除这个，那么尽管view model里面有这条数据，但是不会check             matcher.bind="productMatcher"             checked.bind="selectedProduct">      CPU    </label>    <label>      <input type="radio" name="group3"             model.bind="{ id: 2, name: 'Memory' }"             matcher.bind="productMatcher"             checked.bind="selectedProduct">      Memory    </label>    Selected product: ${selectedProduct.id} - ${selectedProduct.name}  </form></template>

export interface IProduct {   id: number;   name: string;}export class App {  selectedProduct: IProduct = { id: 1, name: 'CPU' };//尽管有这条数据，但是由于空间里面没有matcher.bind，所以不会check  productMatcher = (a, b) => a.id === b.id;}

5.Booleans

如果看懂上面的例子，这边的例子简直就是废话。

export class App {  likesCake = null;}

<template>  <form>    <h4>Do you like cake?</h4>    <label>      <input type="radio" name="group3"             model.bind="null" checked.bind="likesCake">      Don't Know    </label>    <label>      <input type="radio" name="group3"             model.bind="true" checked.bind="likesCake">      Yes    </label>    <label>      <input type="radio" name="group3"             model.bind="false" checked.bind="likesCake">      No    </label>    likesCake = ${likesCake}  </form></template>

6.Strings

就像checkbox一样，我们对于控件数据的绑定一般用model.bind,value.bind这种情况有局限。因为它要求绑定的数据是string类型的。

所以这个view model里面的store是string类型的数组，因此我们可以用value.bind来做。

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

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