javascript - 未绑定(bind) ember 每个助手，无需脚本标签

Question

我在使用 Ember 时遇到了一个奇怪的问题，我真的需要一种解决方法

我有以下内容:

{{#unbound each items}}
    <span>{{unbound myValue}}</span>
    {{unbound view App.MyView content=this.subItems}}
{{/unbound}}

其中应该输出以下内容:

<div>
    <span>First item</span>
    <div>
        ...first other view...
    </div>
    <div>
        ...nth other view...
    </div>
</div>
    ...
<div>
    <span>nth item</span>
    <div>
        ...first other view...
    </div>
    <div>
        ...nth other view...
    </div>
</div>

有两件事需要注意:

1. 我没有使用集合处理程序...它为它创建的 View 添加了一个额外的 div，并且我无法将其与我正在使用的插件一起使用...我-必须-保留 DOM上述结构要求

2. 不应该有 Metamorph 标签...这个结构内部没有任何内容需要绑定(bind)，并且 Metamorph 标签会干扰我的插件的功能

现在，问题来了:我在上面使用了“#unbound every”助手，理论上它应该输出上面的 DOM 结构。 相反我仍然从每个 block 中获取变形标签:

<script id="metamorph-0-start"></script>
<script id="metamorph-1-start"></script>
<div>
    <span>First item</span>
    <div>
        ...first other view...
    </div>
    <div>
        ...nth other view...
    </div>
</div>
<script id="metamorph-1-end"></script>
<script id="metamorph-0-end"></script>
    ...
<script id="metamorph-n0-start"></script>
<script id="metamorph-n1-start"></script>
<div>
    <span>nth item</span>
    <div>
        ...first other view...
    </div>
    <div>
        ...nth other view...
    </div>
</div>
<script id="metamorph-n1-end"></script>
<script id="metamorph-n0-end"></script>

我在这里做错了什么？

这是一个现场 JS Fiddle 演示该问题: http://jsfiddle.net/NQKvy/942/

Answer 1

{{unbound}} 辅助函数不能用作 block 辅助函数，并且不能与 {{each}} 一起使用

您始终需要在特定属性上使用它，如下所示:

{{unbound myProperty}}

请参阅 github 上讨论此问题的线程:https://github.com/emberjs/ember.js/pull/1457

好消息是，在 HTMLBars 出现之前(我上次看到他们正在为 Ember 1.8 开发)，您可以使用 {{group}} 帮助器。它不是 Ember 核心的一部分，但我已经在 Ember 1.5 中成功使用了它，它将为您摆脱变形(以及数据绑定(bind))。

在这里下载:

https://github.com/emberjs/group-helper

最简单的方法就是复制https://github.com/emberjs/group-helper/blob/master/packages/group-helper/lib/main.js的内容成为你自己的 helper 。

然后你可以这样做:

{{#group}}
   {{#each items}}
       <span>{{unbound myValue}}</span>
       {{view App.MyView content=this.subItems}} 
   {{/each}}
{{/group}}

注意:正如 Robert 在下面的评论中所述，{{#group}} 帮助器也会影响 View 本身。

希望有帮助!