【问题标题】:Unbound ember each helper without script tags无脚本标签的未绑定 ember 每个助手
【发布时间】:2014-04-30 17:39:21
【问题描述】:

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. 我没有使用集合处理程序...它为它创建的视图添加了一个额外的 div,我不能将它与我正在使用的插件一起使用...我 - 必须 - 保留 DOM上面需要的结构

  2. 应该没有变形标签...这个结构内部没有任何东西需要绑定,变形标签会影响我的插件的功能

现在,问题来了:我使用了上面的 '#unbound each' 助手,理论上它应该已经输出了上面的 DOM 结构。 相反我仍然从每个块中获得变形标记:

<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/

【问题讨论】:

  • 似乎 unbound 不适用于块助手。
  • 所以唯一的解决方案是使用直把手模板来渲染视图?关于阻止未绑定帮助程序最终是否计划提供此功能的任何想法?
  • 可能不会,Ember Core 团队正在开发 HTMLBars,github.com/tildeio/htmlbars/commits/master,这可能会让您更接近您的解决方案。 (它本质上是通过操作 DOM 而不是使用 metamorph 标签来跟踪项目)
  • 该死的,猜猜它又回到了绘图板上......不过还是谢谢

标签: javascript ember.js handlebars.js


【解决方案1】:

{{unbound}} 助手不能用作块助手,也不能与 {{each}} 一起使用

您总是需要在这样的特定属性上使用它:

{{unbound myProperty}}

在 github 上查看讨论此问题的线程:https://github.com/emberjs/ember.js/pull/1457

好消息是,在 HTMLBars 出现之前(我最后一次看到他们正在为 Ember 1.8 拍摄),您可以使用 {{group}} 助手。它不是 ember 核心的一部分,但我已经在 Ember 1.5 中成功使用它,它会为你摆脱变形(以及数据绑定)。

在这里下载:

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

最简单的做法是将https://github.com/emberjs/group-helper/blob/master/packages/group-helper/lib/main.js 的内容复制到您自己的助手中。

那么你可以这样做:

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

注意:正如 Robert 在 cmets 中所述,{{#group}} 助手也会影响视图本身。

希望有帮助!

【讨论】:

  • 我确实查看了 group helper,它确实生成了我需要的确切 dom 结构,但我遇到了一个小而大的问题:我需要绑定到每个块内当前项目的“id”属性,但由于某种原因,该属性想要绑定到父项目的“id”属性(所有其他属性都有效,这真的很奇怪)......让我看看我是否可以在 JS Fiddle 中复制问题...
  • 我会给你答案,虽然这确实充分回答了我的问题,但这只是我的情况有一个怪癖哈哈
  • 不确定我的开发代码发生了什么,但我的用例通过 JS Fiddle 工作,所以我要调试我的问题(可能是我的代码中的一些愚蠢的东西)...谢谢答案!
  • 对于其他查看此内容的人 - 在上面的示例中,组标签内有一个子视图 - 不会为该视图或其任何内容创建 Metamorph 标签。这一点很重要,因为您也不需要在视图内放置组标签
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-11-20
  • 2015-12-24
  • 2012-06-07
相关资源
最近更新 更多