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: https://ember-twiddle.com/aa9d5ab89c783a8a4fa3

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