ember-cli：创建一个可以呈现视图的帮助器？

Question

我正在尝试使用ember-cli重现Ember-TodoMVC。我被this part困住了。

我创建了一个这样的视图：

应用程序/视图/ action-edit.coffee

ActionEditView = Ember.TextField.extend
  didInsertElement: -> @$().focus()

`export default ActionEditView`

当我直接在Emblem模板中使用它时，e。 G。 view "action-view"，它工作正常：呈现文本字段。

但是emberjs.com/guides建议创建一个帮助来渲染视图。

我发现这句话：“请记住，你必须在ember-cli网站上通过导出makeBoundHelper来注册你的帮助者”。在摆弄了一段时间努力理解ES6模块如何工作之后，我最终得到了不会产生任何JS错误的代码：

应用程序/助手/ action-edit.coffee

`import ActionEditView from 'loltodo/views/action-edit'`

`export default Ember.Handlebars.makeBoundHelper(ActionEditView)`

当我在Emblem模板中使用它时：action-edit，Ember在浏览器控制台中输出：

  

[✓]帮助者：行动编辑....................................... .. loltodo / helpers / action-edit vendor / ember / ember.js:3521

所以我认为帮手很好。

问题是它呈现空白！

我也试过这个：

应用程序/助手/ action-edit.coffee

`import ActionEditView from 'loltodo/views/action-edit'`

`export default Ember.Handlebars.helper('action-edit', ActionEditView)`

在this line中导致错误“未定义不是函数”。

所以问题是：如何使用ember-cli创建一个帮助器来重现Ember-TodoMVC教程的this step？

Answer 1

就像Stefan所说：文档描述了这一点，所以这里是步骤：

1. 从命令提示符运行ember generate helper "luis-highlight" 确保您的助手名称有短划线.. ember-cli不想要 与html标签冲突（如果没有破折号则不起作用）。

2. 在helpers/luis-hightlight.js内写下这个：

   import Ember from 'ember';
   
   export default Ember.Handlebars.makeBoundHelper(function(value) {
     return new Ember.Handlebars.SafeString('<span class="hightlitht">' + value + '</span>');
   });
   

3. 从模板调用助手：

   {{luis-hightlight 'embercli is great'}}
   

Answer 2

考虑一下：https://github.com/WMeldon/ember-cli-todos/blob/master/app/components/edit-todo.js它应该有一个惯用的ember-cli todo设置