Aurelia customAttribute 多个属性传递

Question

我创建了一个自定义属性，它是 bootstrap 工具提示的包装器

tooltip.ts

import {bindable, inject, customAttribute} from "aurelia-framework";
import * as $ from "jquery";

@customAttribute("tooltip")
@inject(Element)
export class Tooltip {
    element: HTMLElement;
    @bindable title: any;
    @bindable placement: any

    constructor(element) {
        this.element = element;
    }

    attached() {
        $('[data-toggle="tooltip"]').tooltip();
    }
}

header.html

<a class="toggle-link" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Click to Search"><i class="fa fa-search"></i></a>

所以问题是如何将 data-placement 和 data-original-tile 传递并绑定到 Tooltip class 中的标题和位置。当前的 aurelia documentation 没有说明自定义属性的多数据绑定。

Answer 1

您可以像这样将多个选项传递给自定义属性：

<div tooltip="placement: 'bottom'; originalTitle: 'Click to Search'"></div>

请查看文档以了解如何实现上述内容。此信息就在您链接到的位置下方。

话虽这么说，您的方案可能通过自定义元素更好地实现。那么您的标记可能如下所示：

<tooltip class="toggle-link" placement="bottom" original-title="Click to Search">
  <i class="fa fa-search"></i>
</tooltip>

Aurelia customAttribute 多个 属性 传递

Aurelia customAttribute multiple property passing

aurelia

Aurelia customAttribute 多个属性传递