Question

我想在ember视图的工具提示中显示一个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>"
    });
  }
});

我知道我完全错了，但你可能明白我想做什么。

我已经直接在模板中尝试了

<a href="#" data-toggle="tooltip" title="<ul>
                                  {{#each groups as |group|}}
                                  <li>{{group.name}}</li>
                                  {{/each}}
  </ul>">{{group_count}}</a>

但是构建失败了：

A block may only be used inside an HTML element or another block.
Error: A block may only be used inside an HTML element or another block.

Answer 1

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

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>

在Ember中使用复杂html的Bootstrap工具提示

1 个答案: