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

时间:2016-10-12 14:27:25

标签: ember.js handlebars.js ember-cli

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

示例:

var givenWord = "hello"

ember模板如下:

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

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

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

   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

答案 2 :(得分:0)

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

template.hbs

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

css文件

span {
 color:red;
}