如何在 ember.js 动作助手中自动触发功能？答案

【问题标题】：how to trigger a function automatically in ember.js action helper?如何在 ember.js 动作助手中自动触发功能？
【发布时间】：2018-01-15 02:56:24
【问题描述】：

我是 ember.js 的新手，正在开发一个应用程序来突出显示如下文本：

<div>
  <h3 class = "title" {{action "highlight" "title"}}>{{document.title}}</h3>
  <div class = "date" {{action "highlight" "date"}}>{{document.date}}</div>
  <p class = "content" {{action "highlight" "content"}}>{{document.contents}}
  </p>
</div>

我创建了一个函数 highlight 将获取类名并突出显示用户输入的搜索文本。这个功能很好用，但是我必须点击才能触发这个高亮功能。 ember action helper中是否有任何方法可以在div节点渲染或自动触发时触发此功能？

【问题讨论】：

如果您仍有疑问，可以向我们展示highlight 操作的代码。

标签： ember.js action

【解决方案1】：

您可能需要实现挂钩didInsertElement，这将在您的组件在屏幕上呈现后立即触发。

例子：

import Component from '@ember/component';
export default Component.extend({
    didInsertElement() {
        this._super(...arguments);
        const title = this.element.querySelector('.title');
        // do something with the title
    },
});

有关 didInsertElement 的更多信息可以在本指南中找到：https://guides.emberjs.com/v2.18.0/components/the-component-lifecycle/

【讨论】：

【解决方案2】：

我不完全了解您的用例，但我认为操作不是解决您的问题的好选择。我建议阅读有关 computed properties 的 ember 指南。每次基础属性更改时，都会重新计算这些属性。


  highlightedContent: computed('userInput', 'content', function() {
    ....
    //return computedContent;
  })

我还建议阅读有关handlebar-helpers 的指南。你可以写一个高亮助手。

【讨论】：

非常感谢您提供的信息。让我们看看。