Question

有没有办法在ember模板中突出显示给定的单词？

示例：

var givenWord = "hello"

ember模板如下：

<div>
<p>some text here, some another text with hello, again hello</p>
</div>

我想将特定的CSS应用于单词hello（这个单词是动态的）感谢任何帮助！

Answer 1

没有内置的简单机制。您可以尝试在Ember中实现以下内容 https://markjs.io/

Answer 2

使用车把助手找到解决方案

   Ember.Handlebars.helper('highlightMatchingText', function (text, phrase) {
    var highlightedText = text.replace(new RegExp(phrase, 'gi'), function (str) {
        return '<span class="color-red">' + str + '</span>';
    });
  return new Ember.Handlebars.SafeString(highlightedText);
});

然后我们可以在hbs内调用，如下所示

{{highlightMatchingText "text goes here" "hello"}}

注意：我正在使用ember 0.2.5

Answer 3

你可以试试这个。这个跨度会给它一个新的亮点和

template.hbs

<div>
<p>some text here, some another text with <span>{{givenWord}}</span> again hello</p>
</div>

css文件

span {
 color:red;
}

如何突出显示hbs中的给定单词？

3 个答案: