javascript – 嵌套HandlebarsJS #each帮助EmberJS无法正常工作

我慢慢开始了解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呢?

看起来哈希中的属性会导致麻烦:使用大写属性进程不起作用 – 如果将其更改为进程,则每个帮助程序按预期工作,请参阅 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",
                        ...
                    }
                ]}
            ]
        }));
    }
});​

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

另一个注意事项:Application#ready在你提供的JSFiddle中不起作用,因为你指定了要在doDomReady上执行的JS(在JSFiddle的左上角选择下拉列表).如果将此更改为无包装,则可以在准备好的回调中访问App.

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

相关文章
相关标签/搜索