前端框架Aurelia

来源：互联网发布：黑马最新java全套视频编辑：程序博客网时间：2024/04/28 19:58

1.checked

Bind 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>
0 0

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia

前端框架Aurelia —— 路由Router

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

前端框架Aurelia——组件Component（二）组件生命周期

前端框架

前端框架

vue.js2.0开发中的几个技巧

团体程序设计天梯赛L1-023输出GPLT

JPEG图像压缩算法流程详解

nginx相关命令

对于字符串中是否包含其他的字符串

前端框架Aurelia

LeetCode 112. Path Sum

strlen与sizeof的区别和用法

iOS中几种数据持久化方案

Linux center os7 java环境搭建

Linux内核的framebuffer相关的内核代码注释

DIY智能家居系统

Drools的API调用

初始化一个事件控制块，OSEventWaitListInit()

黑马最新java全套视频

原创粉丝点击