2

我正在尝试使用 ember-cli 重现 Ember-TodoMVC。我被这部分困住了。

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

app/views/action-edit.coffee

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

`export default ActionEditView`

当我直接在 Emblem 模板中使用它时，例如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 供应商/ember/ember.js:3521

所以我假设助手得到了很好的连接。

问题是它呈现空白！

我也试过这个：

app/helpers/action-edit.coffee

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

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

这会导致此行中出现错误“未定义不是函数” 。

所以问题是：我如何创建一个使用 ember-cli 渲染视图的助手来重现Ember-TodoMVC 教程的这一步？

4

2 回答 2

4

就像 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'}}
于 2014-07-23T16:29:26.123 回答
1

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

于 2014-05-30T18:39:27.980 回答