嵌套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",
                        ...
                    }
                ]}
            ]
        }));
    }
});?

IMHO引用this.Processes应该在#each帮助器中工作,所以这可能是一个bug.您是否能够更改从服务器获得的JSON的属性名称？否则,您可能会编写一个帮助程序,在使用它之前将其缩小JSON的属性名称...

另一个注意事项:Application#ready在你提供的JSFiddle中没有用,因为你指定了要执行的JS onDomReady(在JSFiddle的左上角选择下拉列表).如果您将其更改为no wrap可以App在ready回调中访问.

关于命名的另一个注意事项:实例应命名为lowerCase和类UpperCase.所以这将是App.serverOverview1 = Ember.View.create({ ... });你的例子.