嵌套HandlebarsJS #each与EmberJS不工作助手(Nested Handlebar

我慢慢开始得到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，它的工作原理，而是一个“不确定” -text插入列表中的每一个元素 - 元素前右（减1）。

当我移动#each其他循环之外，并把直接路径到队列（如Servers.0.Queue）它工作得很好，所以它肯定不是数据。

我该如何解决？如果嵌套#each是不可能的，我该怎么办prefend的其他方法“未定义” -text？任何其他的可能性？

PS。我使用未绑定的性能方面的原因，我更新服务器一气呵成对象，可看到，所以没有必要使用绑定的属性 - 因为我发现它显著降低了浏览器的性能（13％的CPU使用率，而绑定给我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 ，您可以访问App的内部ready的回调。

关于命名另注：实例应该命名为小写和大写类。因此，这将是App.serverOverview1 = Ember.View.create({ ... }); 在你的榜样。

Answer 2:

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是必需的，以防止它试图复制方法灰烬增加了Array对象和它的递归以确保它decapitalizes一切。它也许可以在我的情况进行优化，以仅decapitalize阵列，但此时你再混合命名约定。

相反，我只是要求API供应商在“emberHack”属性，如果传递给我提供正确的JSON灰烬期待并已被授予添加 - 但说是一个“跛脚”的要求。我可以向你保证，最API供应商不会是和我一样宽松，但。

文章来源: Nested HandlebarsJS #each helpers with EmberJS not working