javascript - 嵌套的 HandlebarsJS #each helpers 与 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 以记录一条消息时，#the second each 被调用，但它似乎不知道该做什么。

当我用#Queue 替换第二个#each 时，它起作用了，但是就在-元素之前，为列表中的每个元素插入了一个“未定义”文本(负 1)。

当我将#each 移出另一个循环并放入队列的直接路径(例如 Servers.0.Queue)时，它工作正常，所以它肯定不是数据。

我该如何解决这个问题？如果不可能嵌套#each，我如何为其他方法添加“未定义”文本？还有其他可能吗？

附言。出于性能原因，我使用 unbound，我一次性更新了 Servers 对象并观察到，因此不需要使用绑定(bind)属性——因为我注意到它会显着降低浏览器性能(13% 的 CPU 使用率，而 unbound 给了我 0 %)。不确定是否相关。

编辑

请参阅:http://jsfiddle.net/PTC9B/7/

ServerOverview2a 方法毕竟有效，显然 ServerOverview2b 生成了我之前描述的“未定义”文本 - 可能应该为此提交错误报告？

我现在的问题是:为什么嵌套的#each 不起作用而#Processes 起作用？

Answer 1

看起来您的散列中的属性引起了麻烦:使用大写属性 Processes 不起作用 - 如果您将其更改为 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",
                        ...
                    }
                ]}
            ]
        }));
    }
});​

---

恕我直言，引用 this.Processes 应该在 #each 助手中工作，因此这可能是一个错误。您是否能够更改从服务器获取的 JSON 的属性名称？否则，您可能会编写一个帮助程序，在使用之前将 JSON 的属性名称小写 ...

---

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

---

关于命名的另一个注意事项:实例应命名为小写，类应命名为大写。因此在您的示例中为 App.serverOverview1 = Ember.View.create({ ... });。