Ember helper return an html code with Controller action

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:



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

not my expect

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.

Have a look at a simple example: Ember Twiddle

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