Handlebars没有在Emberjs中的数组上循环

Handlebars not looping over array in Emberjs

本文关键字：数组 循环 Emberjs Handlebars      更新时间：2023-09-26

我从服务器中检索到这个JSON对象

    { 
        "Totals": {
            "TotalNotifications": 10,
            "TotalUnreadNotifications": 5
        },
        "NotificationData": [{
            "NotificationId": 1,
            "NotificationType": "Alert",
            "NotificationName": "Low Battery",
            "NotificationDate": "2014-09-08T19:38:57.659",
            "NotificationRead": false,
            "NotificationActive": true,
            "AlertData": {
                "AlertType": "Battery",
                "AlertSeverity": "Critical"
                }
        }, {
            "NotificationId": 2,
            "NotificationType": "Dtcprimary",
            "NotificationName": "Mass or Volume Air Flow",
            "NotificationDate": "2014-09-01T12:00:00.000",
            "NotificationRead": false,
            "NotificationActive": true,
            "DtcData": {
                "DtcCode": "P0101",
                "Vehicle": "2000 Cadillac Deville 4.6L",
                "DtcDescription": "Mass or Volume Air Flow A Circuit Range Performance",
                "ShortDescription": "Ceat ame aut placcat doluptus, quo berum quiandae quid quissim agnimus danimol uptae. Neque si omnis sequo torabori tem nobitatet arcit aut incimaxim fugia sitatium",
                "IdentifixId": "Click <a target='"_blank'" href='"https://www.google.com'">here</a> to request a list of top fixes."
                }
        }, {
            "NotificationId": 3,
            "NotificationType": "Dtcsecondary",
            "NotificationName": "Mass or Volume Air Flow",
            "NotificationDate": "2014-08-01T12:00:00.000",
            "NotificationRead": true,
            "NotificationActive": false,
            "DtcData": {
                "DtcCode": "P0101",
                "Vehicle": "2000 Cadillac Deville 4.6L",
                "DtcDescription": "Mass or Volume Air Flow A Circuit Range Performance",
                "ShortDescription": "Ceat ame aut placcat doluptus, quo berum quiandae quid quissim agnimus danimol uptae. Neque si omnis sequo torabori tem nobitatet arcit aut incimaxim fugia sitatium",
                "TopReportedFix": "Replace Air Intake Boot",
                "FrequentlyReportedFixes": "<ul><li>Cleaned Mass Air Flow (MAF) Sensor</li><li>Programmed Powertrain Control Module (PCM)</li></ul>",
                "AlsoReportedFixes": "<ul><li>Cleaned Mass Air Flow (MAF) Sensor</li><li>Cleaned throttle body</li><li>Flushed fuel tank w/P0171, P0174</li></ul>"
                }
        }, {
            "NotificationId": 4,
            "NotificationType": "Recall",
            "NotificationName": "Mass or Volume Air Flow A Circuit Range Performance",
            "NotificationDate": "2014-09-01T12:00:00.000",
            "NotificationRead": false,
            "NotificationActive": true,
            "RecallId": 31234
        }]
    }

当我在Notification对象上循环时，不会发生任何事情。当我尝试普通的车把时，它工作得很好，http://jsbin.com/lemafe/1/edit

以下是我在Emberjs组件中循环的方式。items是属性传递到组件后的名称。

{{alerts-dashboard items=model}}
{{#each items}}
{{Totals.TotalUnreadNotifications}} // this outputs the number 5 as expected
{{#each NotificationData}}
{{NotificationId}} //this doesn't get outputted because the loop never happens
{{/each}}
{{/each}}

为什么它在Emberjs中不起作用？

您需要使用{{#each item in items}}。

{{#each item in items}}
  {{item.Totals.TotalUnreadNotifications}}
  {{#each item.NotificationData}}
    {{NotificationId}}
  {{/each}}
{{/each}}

我创建了一个JSBin示例。

编辑：

这是我编辑过的JSBin，显示了如果你使用notificationData的小写名称，它也可以工作，就像我在SO上找到的这个相关答案中提到的那样

{{#each model}}
  <li>{{Totals.TotalUnreadNotifications}}</li>
  <ul>
  {{#each notificationData}}
    <li>Type: {{NotificationType}}</li>
  {{/each}}
  </ul>
{{/each}}
相关文章：