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

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