10、Aurelia开发：视图资源、模板条件与重复器的深入应用

Aurelia开发：视图资源、模板条件与重复器的深入应用

1. 视图资源与自定义属性

1.1 自定义属性基础

在Aurelia开发中，自定义属性能够扩展DOM功能。例如，在 book-list.js 中，我们可以实现书籍移除功能：

import {bindable} from 'aurelia-framework';
export class BookList {
  @bindable books;

  removeBook(index){
      this.books.splice(index, 1);          
  }
}

当刷新 http://localhost:9000/#/books 页面时，按钮上方会显示工具提示（tooltip），且该工具提示可应用于任何元素。不过，当前的工具提示属性存在两个主要问题：一是只能显示在元素上方；二是通过 title 属性应用，而非Aurelia的绑定方式。

1.2 单值绑定

单值绑定适用于只需绑定单个值的情况。为了改进工具提示属性，我们可以采用单值绑定。首先，修改 tooltip.js 文件：

export class TooltipCustomAttribute{
  attached(){
      $(this.element).tooltip({ti