Ember helper return an html code with Controller action

1

Because handlebars too simple to cannot fix complex logic, So I write some code in helper/component that can generate html code with action.

But It not works, it just generate {{action 'alert'}} string to me.

for example:

My helper:

import Ember from 'ember';

export function carSelect([car_types]) {
  var html = '<li {{action "alert"}}></li>';

  return Ember.String.htmlSafe(html);
}

export default Ember.Helper.helper(carSelect);

in tempate:

{{car-select}}

result

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <li {{action 'alert'}}></li>
</body>
</html>

not my expect

2

This is where you should use components instead of handlebars helpers. If you have experiences on Angular, think helpers as filters and components as directives.

3

Have a look at a simple example: Ember Twiddle

(I kept the action on the li, but you should probably make it a button)