ember.js - ember-cli:创建一个可以渲染 View 的助手？

Question

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

我创建了一个这样的 View :

app/views/action-edit.coffee

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

`export default ActionEditView`

当我直接在徽章模板中使用它时，例如。 G。 查看“action-view”，它工作正常:呈现一个文本字段。

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

我在 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 中出现错误“undefined is not a function” .

所以问题是:我如何创建一个助手来使用 ember-cli 渲染 View 以重现 this step Ember-TodoMVC 教程？

Answer 1

就像 Stefan 所说:文档对此进行了描述，因此步骤如下:

1. 从命令提示符运行ember生成助手“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'}}