嵌套手柄JES＃EachJS每個助手都不能正常工作

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

似乎第二個循環不跑，當我修改灰燼登錄的消息，#the第二每次調用，但它似乎不知道該怎麼做。

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

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

我該如何解決這個問題？如果#each嵌套是不可能的，我怎樣才能將其他方法的「undefined」文本替換？任何其他可能性？

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

編輯

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

的ServerOverview2a法作品畢竟，顯然ServerOverview2b產生-text我描述了「不確定」前面 - 或許應該立案，一個錯誤報告？

我現在的問題是：爲什麼嵌套#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輔助工作，所以這可能是一個錯誤。你能夠更改從服務器獲得的JSON的屬性名稱嗎？否則，你可能會寫的二手面前有小寫一個JSON你的屬性名稱的輔助...

---

另注：Application#ready沒有在你提供的jsfiddle工作，因爲你指定的JS要執行onDomReady （選擇JSFiddle左上角的下拉菜單）。如果將其更改爲no wrap，則可以在ready回撥中訪問App。

---

關於命名的另一個注意事項：實例應該命名爲lowerCase和classes 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對象的方法，並且它是遞歸的，以確保它將所有內容解除封裝。在我的情況下，它可能會被優化爲僅對數組進行解除封頂，但是接下來您將再次混合命名約定。

相反，我只是要求API供應商添加一個「emberHack」屬性，該屬性如果傳遞給了我適當的JSON Ember期望並且已被授予 - 但被認爲是「跛腳」的要求。我可以保證，大多數API供應商不會像我一樣寬鬆。