Question

以下Ember Handlebars模板渲染第1行，但不会在嵌套的每个（或每个内部）内渲染一个

    <table width="50%">
        {{#each someData.items as |item|}}
            <tr> <!-- This one RENDERS -->
                <td width="25%"><span class="boldTxt">{{item.fld1}}</span></td>
                <td width="25%">{{item.fld2}}</td>
            </tr>
            {{#each item.Reas as |rea|}}            
                <tr> <!-- This one does not RENDER -->
                    <td>{{rea}}</td>
                </tr>
            {{/each}}
        {{/each}}
    </table>

问题是什么？

我使用的是Ember版本1.13

Answer 1

最有可能的问题是，您使用的是 Ember2.0 或更高版本（基于您的外部each循环），因此您的内部each循环现在无效（以前不推荐使用）格式。此外，您对两个循环使用相同的变量名item，这将无法正常工作。

http://guides.emberjs.com/v2.1.0/templates/displaying-a-list-of-items/

只需使用与外部循环相同的格式：

变化：

{{#each item in item.Reasons}}

要：

{{#each item.Reasons as |reason|}}

修改

如果你的Reas数组看起来像你在评论中描述的那样：

item.Reas = [null]; // arrays containing a single `null` value

然后把手会为这些值显示一个空字符串，因为Handlebars会将undefined和null强制为空字符串。

{{reas}} {{!-- if reas is null then an empty string is printed --}

如果您想显示null和undefined值，您可以做一个简单的帮助：

// helpers/show-value.js
import Ember from "ember";

export default Ember.Helper.helper(function(params) {
  let value = params[0];

  if(value === undefined) { return 'undefined'; }
  if(value === null) { return 'null'; }
  return value;

});

编辑2

根据您在评论中的解释：

由于您使用的是Ember 1.13，因此您需要解决此问题。这是一种方式：

// components/each-keys.js
export default Ember.Component.extend({
  object: null, // passed in object
  items: Ember.computed('object', function() {
    var object = Ember.get(this, 'object');

    var keys = Ember.keys(object);

    return keys.map(function(key) {
      return { key: key, value: object[key]};
    })
  })
})

用法：

{{#each-keys object=item.Reas as |key value|}}
    <tr>
        <td>{{key}}</td>
        <td>{{value}}</td>
    </tr>
{{/each-keys}}

Here is a running example

如果您更新到Ember 2.0，这应该是非常简单的1.13（因为2.0基本上是1.13而没有弃用），您可以使用each-in帮助程序迭代对象并获取对其键和值的访问权限。这是一个简单的例子：

{{#each-in items as |key value|}}
  <p>{{key}}: {{value}}</p>
{{/each-in}}

Ember Handlebars嵌套每个都不起作用

1 个答案:

修改

编辑2