使用自定义属性：

Question

我正在遵循结构来实现Sean Hunter Blog的工具提示。现在我想提供工具提示内容作为动态html内容，即我想在内容中显示一个html模式。我如何提供使用Aurelia框架。在使用自定义绑定处理程序的淘汰JS中，我提供的内容与分区ID一样，如下面的代码。

淘汰赛结构

 <button data-bind="tooltip: { template: 'ElementId', trigger: 'click', placement: 'right', container: 'body' }">Click Me</button>

    <div id="ElementId" style="display: none;">
        <div>Dynamic content will go here</div>
    </div>

如何与Aurelia结构实现相同：

<template>
<require from="templates/popover/tooltip"></require>
<button data-toggle="tooltip" tooltip="placement:bottom;trigger:click;html:true;template:'ElementId';title:tooltip Header">Click Me</button>

<div id="ElementId" style="display: none;">
            <div>Dynamic content will go here</div>
        </div>

</template>

自定义属性代码

import {customAttribute, inject, bindable} from 'aurelia-framework';
import $ from 'bootstrap';

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

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

    bind() {
        if (this.content) {
            $(this.element).tooltip({ title: this.title, placement: this.placement, content: this.content });
        }
        else {
            $(this.element).tooltip({ title: this.title, placement: this.placement, template: $('#'+this.template).html() });
        }


    }

    // gets fired when the provided value changes, although not needed in this example since the json from reddit is static
    titleChanged(newValue) {
        $(this.element).data('bs.tooltip').options.title = newValue;
    }
    contentChanged(newValue) {
        if (this.content) {
            $(this.element).data('bs.tooltip').options.content = newValue;
        }
        else {
            $(this.element).data('bs.tooltip').options.template = newValue;
        }
    }
    placementChanged(newValue) {
        $(this.element).data('bs.tooltip').options.placement = newValue;
    }
}

Answer 1

您需要在自定义属性中实现其余的bootstrap popover API，并添加一些逻辑以将选择器转换为模板。

以下是一个例子：https://gist.run?id=909c7aa984477a465510abe2fd25c8a1

注意：为了清晰起见，我已添加bootstrap popovers的默认值

使用自定义属性：

<强>的src / app.html

<template>
  <h1>${message}</h1>

 <button class="btn btn-block btn-default" popover="title.bind: message; placement: top">Default popover</button>
 <button class="btn btn-block btn-default" popover="title.bind: message; template-selector: #popoverTemplate; placement: bottom; html: true">Custom popover</button>

 <div id="popoverTemplate">
   <div class="popover" role="tooltip">
     <div class="arrow"></div>
     <h3 class="popover-title"></h3>
     <div>Some custom html</div>
   </div>
 </div>
</template>

<强>的src / app.ts

export class App {
  message = "Hello world";
}

<强>的src / popover.ts

import {inject, customAttribute, bindable, DOM} from "aurelia-framework";

@customAttribute("popover")
@inject(DOM.Element)
export class Popover {
  public element: HTMLElement;

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

  @bindable({defaultValue: true})
  public animation: boolean;

  @bindable({defaultValue: false})
  public container: (string | false);

  @bindable({defaultValue: 0})
  public delay: (number | object);

  @bindable({defaultValue: false})
  public html: boolean;

  @bindable({defaultValue: "right"})
  public placement: (string | Function);

  @bindable({defaultValue: false})
  public selector: (string | false);

  @bindable({defaultValue: `<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>`})
  public template: string;

  @bindable({defaultValue: false})
  public templateSelector: (string | false);

  @bindable({defaultValue: ""})
  public title: (string | Function);

  @bindable({defaultValue: "click"})
  public trigger: string;

  @bindable({defaultValue: { selector: "body", padding: 0 }})
  public viewport: (string | Object | Function);

  public attached(): void {
    let template;

    if (this.templateSelector) {
      const templateElement = document.querySelector(this.templateSelector);
      template = templateElement.innerHTML;
    } else {
      template = this.template;
    }

    $(this.element).popover({
      animation: this.animation,
      container: this.container,
      delay: this.delay,
      html: this.html,
      placement: this.placement,
      selector: this.selector,
      template: template,
      title: this.title,
      trigger: this.trigger,
      viewport: this.viewport
    });
  }
}

使用自定义元素：

这是对@Ashley Grant的评论的回应。如果您使用自定义元素，它可以提高清晰度。我不确定他的实施情况，但这将是一种让它在没有真正失去灵活性的情况下工作的方法。

<强>的src / app.html

<template>
  <h1>${message}</h1>

 <popover-element title.bind="message" placement="bottom">
 </popover-element>
 <popover-element title.bind="message" placement="bottom">
   <button slot="popoverTarget" class="btn btn-block btn-default">
     Custom popover (custom element)
   </button>
   <div slot="popoverTemplate" class="popover" role="tooltip">
     <div class="arrow"></div>
     <h3 class="popover-title"></h3>
     <div>Some custom html</div>
     <div>Message: ${message}</div>
   </div>
 </popover-element>

</template>

<强>的src / app.ts

export class App {
  message = "Hello world";
}

<强>的src /酥料饼-element.html

<template>
  <div ref="target">
    <slot name="popoverTarget">
      <button class="btn btn-block btn-default">Default popover (custom element)</button>
    </slot>
  </div>
  <div ref="template">
    <slot name="popoverTemplate">
      <div class="popover" role="tooltip">
        <div class="arrow"></div>
        <h3 class="popover-title"></h3>
        <div class="popover-content"></div>
      </div>
    </slot>
  </div>
</template>

<强>的src /酥料饼-element.ts

import {customElement, bindable} from "aurelia-framework";

@customElement("popover-element")
export class PopoverElement {
  public template: HTMLElement;
  public target: HTMLElement;

  @bindable({defaultValue: true})
  public animation: boolean;

  @bindable({defaultValue: false})
  public container: (string | false);

  @bindable({defaultValue: 0})
  public delay: (number | object);

  @bindable({defaultValue: false})
  public html: boolean;

  @bindable({defaultValue: "right"})
  public placement: (string | Function);

  @bindable({defaultValue: false})
  public selector: (string | false);

  @bindable({defaultValue: ""})
  public title: (string | Function);

  @bindable({defaultValue: "click"})
  public trigger: string;

  @bindable({defaultValue: { selector: "body", padding: 0 }})
  public viewport: (string | Object | Function);

  public attached(): void {

    $(this.target.firstElementChild).popover({
      animation: this.animation,
      container: this.container,
      delay: this.delay,
      html: this.html,
      placement: this.placement,
      selector: this.selector,
      template: this.template.firstElementChild.outerHTML,
      title: this.title,
      trigger: this.trigger,
      viewport: this.viewport
    });
  }
}

Answer 2

您可以从此行模板中删除'.outerHTML'：this.template.firstElementChild.outerHTML，作为模板：this.template.firstElementChild，以获取模型绑定。

Aurelia js为popover body

2 个答案:

使用自定义属性：

使用自定义元素：