嵌套HandlebarsJS＃每个助手与EmberJS不工作

本文介绍了嵌套HandlebarsJS＃每个助手与EmberJS不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我慢慢开始得到EmberJS的悬念。不幸的是，我遇到了一个我似乎无法解决的问题。

我有一个复杂的数据结构，我通过JSON检索多个嵌套数组我似乎不能嵌套#each帮助者。

我已经设置了我的模板如下（缩写）：

  {{＃servers}} 
< div class =server> 
< h1> {{unbound Name}}< / h1> 
时间：{{jsonDate CurrentTime}}< br /> 
 
< table> 
 {{#each Processes}} 
< tr> 
< td> {{unbound Name}}< / td> 
< td> {{unbound Location}}< / td> 
< / tr> 
 {{/ each}} 
< / table> 
< / div> 
 {{＃/ each}}

第二个循环似乎没有运行，当我修改Ember来记录消息时，＃第二个被调用，但它似乎不知道该怎么做。

当我更换第二个#each使用#Queue，它可以工作，但在-element之前，为列表中的每个元素（减1）插入一个undefined-text。

当我移动#each在另一个循环之外并放在直接路径Queue中（例如Servers.0.Queue），它工作正常，所以它当然不是数据。

如何解决这个问题？如果无法嵌套#each，那么我如何为其他方法提供undefined-text？任何其他的可能性？

PS。我出于性能原因使用unbound，我一次更新了Servers对象，并观察到这一点，所以没有必要使用绑定属性，因为我注意到它显着降低了浏览器的性能（13％的CPU使用率，而unbound给了我0 ％）。不确定是否相关。

编辑

请参阅：

ServerOverview2a方法完全可以工作，显然ServerOverview2b生成了我之前描述的undefined - 文本 - 可能应该提交一个错误报告？

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

解决方案

在您的哈希中引起了麻烦：使用大写属性进程不起作用 - 如果将其更改为进程 每个帮助器按预期工作，请参阅：

 < script type =text / x-handlebars数据模板名称=应用服务器> 
< h1>默认< / h1> 
 {{#each data.Servers}} 
< div class =server> 
< h1> {{unbound this.Name}}< / h1> 
 
时间：{{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，
进程：[
 {
名称：apache.exe，
 ... 
} 
]} 
] 
 }））; 
} 
}）;

IMHO参考 this.Processes 应该在 #each 帮助器中工作，所以这可能成为一个bug您是否可以更改从服务器获得的JSON的属性名称？否则，您可能会编写一个帮助器，它可以在使用JSON之前降低JSON的属性名称。

另一个注释： Application＃ready 在您提供的JSFiddle中无效，因为您指定要执行的JS onDomReady （选择下拉列表在JSFiddle的左上角）。如果您将此更改为无包裹，则可以在中准备好中的 App $ c> callback。

 
 
 
 
 
 另一个关于命名的注释：实例应该命名为lowerCase和类UpperCase。所以在你的例子中将是 App.serverOverview1 = Ember.View.create（{...}）; 。
 
I'm slowly starting to get the hang of EmberJS. Unfortunately I've run into an issue I can't seem to work out.
I have a complex data-structure, which I retrieve through JSON, with multiple nested arrays and I can't seem to nest #each helpers.
I've setup my template as follows (shortened):
{{#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 second loop doesn't seem to run, when I modify Ember to log a message, #the second each is called, but it seems it doesn't know what to do.
When I replace the second #each with #Queue, it works, but right before the -element an "undefined"-text is inserted for every element in the list (minus 1).
When I move the #each outside of the other loop and put in the direct path to Queue (eg. Servers.0.Queue) it works fine, so it's certainly not the data.
How do I fix this? If nested #each is not possible, how do I prefend the "undefined"-text for the other method? Any other possibilities?
PS. I use unbound for performance reasons, I update the Servers object in one go and observe that, so there is no need to use bound properties - as I've noticed it significantly reduces browser performance (13% CPU Usage, whereas unbound gave me 0%). Not sure if related.
EDIT
Please see: http://jsfiddle.net/PTC9B/7/
The ServerOverview2a-method works after all, apparently ServerOverview2b generates the "undefined"-text I described earlier - probably should file a bug report for that?
My question now is: Why do nested #each not work whereas #Processes does?
 解决方案 
It looks like the properties in your hash are causing the troubles: using an Uppercase property Processes doesn't work - if you change it to processes the each helper works as expected, see 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 referring to this.Processes should work in the #each helper, so this might be a bug. Are you able to change the property names of the JSON which you get from the server? Otherwise you might write a helper which lowercases your property names of a JSON before it's used ...
Another note: the Application#ready didn't work in your provided JSFiddle, because you specified the JS to be executed onDomReady (select dropdown in upper left corner of JSFiddle). If you change this to no wrap you can access App within your ready callback.
Another note about naming: instances should be named lowerCase and classes UpperCase. So it would be App.serverOverview1 = Ember.View.create({ ... }); in your example.
                        这篇关于嵌套HandlebarsJS＃每个助手与EmberJS不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！