ember-cli：创建一个可以渲染视图的助手？

Question

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

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

app/views/action-edit.coffee

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

`export default ActionEditView`

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

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

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

app/helpers/action-edit.coffee

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

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

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

[✓] helper:action-edit ................................... .. loltodo/helpers/action-edit vendor/ember/ember.js:3521

所以我假设帮助者连接得很好。

问题是它呈现空白！

我也试过这个：

app/helpers/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 设置