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>

所以问题是我如何将数据放置和数据原始图块传递给Tooltip类中的标题和位置。当前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多个属性传递

1 个答案: