Skip to content

Instantly share code, notes, and snippets.

@rayjcwu
Created March 20, 2018 00:26
Show Gist options
  • Save rayjcwu/135943062702f95a5301038c0850b561 to your computer and use it in GitHub Desktop.
Save rayjcwu/135943062702f95a5301038c0850b561 to your computer and use it in GitHub Desktop.
underline won't trigger
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
inputValue: '',
mouseUpCount: 0,
mouseOverCount: 0,
options: [
'alice',
'bob',
'cindy',
'david'
],
actions: {
onMouseOver(term) {
this.incrementProperty('mouseOverCount');
},
onMouseUp(term) {
this.incrementProperty('mouseUpCount');
}
}
});
import Ember from 'ember';
export function underline([text, term]) {
const textLower = (text || '').trim().toLowerCase();
const termLower = (term || '').trim().toLowerCase();
let i = textLower.indexOf(termLower);
if (i === -1) {
return text;
} else {
let prefix = text.substring(0, i);
let suffix = text.substring(i + term.length);
let match = text.substring(i, i + term.length);
return Ember.String.htmlSafe(`${prefix}<b>${match}</b>${suffix}`);
}
}
export default Ember.Helper.helper(underline);
mouse over count: {{mouseOverCount}}
<br>
mouse up count: {{mouseUpCount}}
<br>
{{input value=inputValue}}
<br>
<ul>
{{#each options as |option|}}
<li onmouseover={{action 'onMouseOver'}}>
<span onmouseup={{action 'onMouseUp' option}}>
{{underline option inputValue}}
</span>
</li>
{{/each}}
</ul>
{
"version": "0.13.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.16.2",
"ember-template-compiler": "2.16.2",
"ember-testing": "2.16.2"
},
"addons": {
"ember-data": "2.16.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment