嵌套HandlebarsJS #each助手與EmberJS無法正常工作

Question

我慢慢開始了解EmberJS。 不幸的是，我遇到了一個似乎無法解決的問題。

我有一個復雜的數據結構，我通過JSON檢索，有多個嵌套數組，我似乎無法嵌套#each幫助器。

我設置了我的模板如下（縮短）：

{{#each Servers}}
     <div class="server">
          <h1>{{unbound Name}}</h1>
          Time: {{jsonDate CurrentTime}}<br />

          <table>
               {{#each Processes}}
                    <tr>
                         <td>{{unbound Name}}</td>
                         <td>{{unbound Location}}</td>
                    </tr>     
               {{/each}}
          </table>
     </div>
{{#/each}}

第二個循環似乎沒有運行，當我修改Ember以記錄消息時，＃第二個循環被調用，但似乎它不知道該怎么做。

當我用#Queue替換第二個#each時，它可以工作，但是在-element之前，為列表中的每個元素插入一個“undefined”-text（減1）。

當我將#each移動到另一個循環之外並放入Queue的直接路徑（例如Servers.0.Queue）時，它工作正常，所以它肯定不是數據。

我該如何解決？ 如果無法嵌套#each，我如何為其他方法保護“undefined”-text？ 還有其他可能嗎？

PS。 我出於性能原因使用unbound，我一次更新Servers對象並觀察它，因此不需要使用綁定屬性 - 因為我注意到它顯着降低了瀏覽器性能（13％CPU使用率，而未綁定給了我0 ％）。 不確定是否相關。

編輯

請參閱： http ： //jsfiddle.net/PTC9B/7/

ServerOverview2a方法畢竟工作，顯然ServerOverview2b生成我之前描述的“未定義”文本 - 可能應該為此提交錯誤報告？

我現在的問題是： 為什么嵌套#each不起作用而#Processes呢？

Answer 1

看起來哈希中的屬性會導致麻煩：使用大寫屬性Processes不起作用 - 如果將其更改為processes則each幫助程序按預期工作，請參閱http://jsfiddle.net/pangratz666/ndkWt/ ：

<script type="text/x-handlebars" data-template-name="app-server">
    <h1>Default</h1>
    {{#each data.Servers}}
        <div class="server">
            <h1>{{unbound this.Name}}</h1>

            Time: {{unbound this.CurrentTime}}<br />

            <table>
                {{#each this.processes}}
                    <tr>
                        <td>{{unbound Name}}</td>
                        <td>{{unbound Location}}</td>
                    </tr>     
                {{/each}}
            </table>
        </div>
    {{/each}}
</script>​

App = Ember.Application.create({
    ready: function() {
        Ember.View.create({
            templateName: 'app-server',
            dataBinding: 'App.dataController.data'
        }).append();

        App.dataController.getServers();
    }
});

App.dataController = Ember.Object.create({
    data: {},
    getServers: function() {
        this.set('data', Ember.Object.create({
            "Servers": [
                {
                "Name": "USWest",
                "CurrentTime": "1337",
                "processes": [
                    {
                        "Name": "apache.exe",
                        ...
                    }
                ]}
            ]
        }));
    }
});​

---

恕我直言，指的是this.Processes應該在#each助手中工作，所以這可能是一個bug。 您是否能夠更改從服務器獲得的JSON的屬性名稱？ 否則，您可能會編寫一個幫助程序，在使用它之前將其縮小JSON的屬性名稱...

---

另一個注意事項： Application#ready在你提供的JSFiddle中不起作用，因為你指定了要在onDomReady上執行的JS（在JSFiddle的左上角選擇下拉列表）。 如果將此更改為no wrap ，則可以在ready回調中訪問App 。

---

關於命名的另一個注意事項：實例應命名為lowerCase和類UpperCase。 所以它將是App.serverOverview1 = Ember.View.create({ ... }); 在你的例子中。

Answer 2

Ember試圖通過它是否具有大寫屬性來推斷您的路徑是絕對的（全局的）還是相對的（本地的）。 在這種情況下，Ember正在尋找不存在的全局Processes屬性。 正如@pangratz指出的那樣，簡單的解決方案是使用小寫。 有關更多信息，請參見http://www.emberist.com/2012/04/09/naming-conventions.html 。

Answer 3

這是我制作的后處理方法：

function decapitalizeJSON(data, dataType) {
    var output = (dataType == undefined || dataType == '[object Object]') ? {} : [];
    var value, type;

    for(var key in data) {
        if(!data.hasOwnProperty(key)) {
            continue;
        }

        value = data[key];
        type = Object.prototype.toString.apply(value);

        if (type == '[object Array]' || type == '[object Object]') {
            output[key.charAt(0).toLowerCase() + key.substr(1)] = decapitalizeJSON(value, type);
        }
        else {
            output[key.charAt(0).toLowerCase() + key.substr(1)] = value;
        }
    }

    return output;
}

然而，這是非常緩慢的 - 毫不奇怪。 hasOwnProperty是必需的，以防止它試圖復制Ember添加到Array對象的方法，並且它是遞歸的，以確保它對所有內容進行去除資本化。 在我的情況下，它可能只是為了對數組進行decapitalize進行優化，但是你再次混合了命名約定。

相反，我只是要求API供應商添加一個“emberHack”屬性，如果傳遞給我提供了正確的JSON Ember預期並且已被授予 - 但據說是一個“蹩腳”的要求。 我可以保證大多數API供應商不會像我一樣寬松。