Ember 把手嵌套每個都不起作用

Question

以下 Ember Handlebars 模板呈現第一行，但不呈現嵌套的 each（或內部 each）

    <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 將顯示這些值的空字符串，因為 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}}

這是一個運行示例

如果您更新到 Ember 2.0，從 1.13 開始應該非常簡單（因為 2.0 基本上是 1.13 沒有棄用），您可以使用each-in助手來迭代對象並訪問其鍵和值。 這是一個簡單的例子：

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