Javascript Ember中带有复杂html的引导工具提示

我想在灰烬视图的工具提示中显示html列表

我想知道一个模板中的数据是如何进入子类组件的。像

export default Ember.Component.extend({
  didInsertElement: function() {
    $('[data-toggle="tooltip"]').tooltip({
      placement: "bottom",
      html: true,
      title: "<ul> {{#each groups as |group|}} <li>{{group.name}}</li> {{/each}} </ul>"
    });
  }
});

---

您可以创建计算属性并将其用作标题：

export default Ember.Component.extend({
  titleComputed: Ember.computed('groups.[]', {
    get() {
      let groups = this.get('groups');
      if (!groups || groups.get('length') === 0)
      {
        return;
      }

      let result = '<ul>';
      groups.forEach(group => {
        result += '<li>' + group.get('name') + '</li>';
      });
      return result + '</ul>';
    }
  }),
  didInsertElement() {
    let title = this.get('titleComputed');
    $('[data-toggle="tooltip"]').tooltip({
      placement: "bottom",
      html: true
    });
  }
});

在你的模板中

<a href="#" data-toggle="tooltip" title={{titleComputed}}>{{group_count}}</a>

---

非常感谢@daniel kmak。问题是它只读取第一组，而不是我的每个列表。下面是我的数据的jsbin。当我安慰时。logthis。获取“组”；似乎处理正确，但第一组在所有工具提示上呈现。编辑答案。等待您的反馈@daniel kmak。这对我有用，但可能有点奇怪。为什么要使用get？您不必使用get，您可以使用普通函数而不是对象，但当您通过显式指定只有getter而没有setter来指定计算属性时，我就更清楚了。这不重要，这是风格问题，什么适合你。

export default Ember.Component.extend({
  titleComputed: Ember.computed('groups.[]', {
    get() {
      let groups = this.get('groups');
      if (!groups || groups.get('length') === 0)
      {
        return;
      }

      let result = '<ul>';
      groups.forEach(group => {
        result += '<li>' + group.get('name') + '</li>';
      });
      return result + '</ul>';
    }
  }),
  didInsertElement() {
    let title = this.get('titleComputed');
    $('[data-toggle="tooltip"]').tooltip({
      placement: "bottom",
      html: true
    });
  }
});

<a href="#" data-toggle="tooltip" title={{titleComputed}}>{{group_count}}</a>