Javascript 到路由的转换导致“无法读取属性”错误

我有一个奇怪的错误，我想不出来。我的应用程序有一个带有嵌套路由的仪表板。当我尝试从仪表板导航到任何其他路由时，我会得到错误Uncaught TypeError:Cannot read属性'NotificationRead'的undefined。NotificationRead是我的模板中的一个属性。如果我尝试从主页导航到设置页面，我不会出错。只有当我尝试从仪表板移动到任何其他页面时，才会出现这种情况

这是我的路线

App.Router.map(function () {
    // Dashboard
    this.resource('vehicle', {
        path: '/dashboard'
    }, function() {
        this.resource('alerts', {
            path: 'notifications'
        }, function() {
            this.resource('alert', {
                path: ':alert_id'
            });
        });
        this.resource('reminders', {
            path: 'reminders'
        }, function() {
            this.resource('reminder', {
                path: ':reminder_id'
            });
        });
    });

    // this.resource('alerts', {
    //     path: 'alerts'
    // });

    this.route('settings', {
        path: '/settings'
    });

    this.resource('support', {
        path: '/support'
    });
});

我的所有链接都是使用{{link to}{{/link to}}呈现的。Ember表示未定义的属性位于从my vehicle.index模板调用的组件中。这就是为什么我如此困惑。当我转换到“设置”时，Ember正在尝试解析设置模板中不存在的组件

<header class="alertsModule__header">
    <svg class="shape-exclamation_point_warning" viewBox="0 0 65 65"><use xlink:href="#shape-exclamation_point_warning"></use></svg>
    <h1 class="alertsModule__title">{{total}} New Alerts</h1>
</header>
{{#each item in items}}
{{!-- When trying to just do the section and div tags in the #if statement the HTML broke. Not sure why --}}

{{#if item.NotificationRead}}
<section class="miniAlert--read">
    <div class="miniAlert--read__inner">
        <svg class="shape-{{unbound alertIcon item.NotificationType}}" viewBox="0 0 65 65"><use xlink:href="#shape-{{unbound alertIcon item.NotificationType}}"></use></svg>
        <span class="icon-arrow-right"></span>
        <h1 class="miniAlert--unread__title">{{item.NotificationName}}</h1>
        <span class="miniAlert--unread__timestamp">Today, 12:23PM</span>
    </div>
</section>
{{else}}
<section class="miniAlert--unread">
    <div class="miniAlert--unread__inner">
        <svg class="shape-{{unbound alertIcon item.NotificationType}}" viewBox="0 0 65 65"><use xlink:href="#shape-{{unbound alertIcon item.NotificationType}}"></use></svg>
        <span class="icon-arrow-right"></span>
        <h1 class="miniAlert--unread__title">{{item.NotificationName}}</h1>
        <span class="miniAlert--unread__timestamp">Today, 12:23PM</span>
    </div>
</section>
{{/if}}
{{/each}}
{{#link-to "alerts" class="seeAllBtn--alerts"}}
    <span class="seeAllBtn--alerts__inner">See all alert history</span>
    <span class="icon-arrow-right"></span>
{{/link-to}}

这是我的环境信息

Ember 1.8.0-beta.1
Handlebars-runtime 1.2.1
jQuery 2.1.1

这是实际错误和堆栈跟踪。您可以看到，错误发生在转换为设置之后

Transitioned into 'settings' ember.js:15160
Uncaught TypeError: Cannot read property 'NotificationRead' of undefined ember.js:12138

这是错误的调用堆栈

ChainNodePrototype.unchain ember.js:12138
ChainNodePrototype.remove ember.js:12114
unwatchPath ember.js:19438
unwatch ember.js:19508
removeObserver ember.js:16598
(anonymous function) ember.js:42755
apply ember.js:19278
sendEvent ember.js:14426
__exports__.default.Mixin.create.trigger ember.js:31415
apply ember.js:19280
superFunction ember.js:15752
EmberObject.extend.trigger ember.js:40418
apply ember.js:19280
superWrapper ember.js:18857
Renderer.willDestroyElement ember.js:38986
Renderer_beforeRemove ember.js:10757
Renderer_remove ember.js:10714
EmberObject.extend.destroy ember.js:40444
apply ember.js:19278
superWrapper ember.js:18857
apply ember.js:19278
superFunction ember.js:15752
CoreView.extend.destroy ember.js:42565
apply ember.js:19278
superWrapper ember.js:18857
(anonymous function) ember.js:40265
applyStr ember.js:19294
sendEvent ember.js:14420
notifyBeforeObservers ember.js:17429
propertyWillChange ember.js:17241
set ember.js:17715
trySet ember.js:17783
(anonymous function) ember.js:11601
tryable ember.js:14313
tryFinally ember.js:19059
suspendListener ember.js:14316
_suspendObserver ember.js:16628
Binding._sync ember.js:11600
DeferredActionQueues.invoke ember.js:674
DeferredActionQueues.flush ember.js:728
Backburner.end ember.js:134
Backburner.run ember.js:189
apply ember.js:19283
run ember.js:17857
__exports__.default.EmberObject.extend._bubbleEvent ember.js:38252
(anonymous function) ember.js:38203
jQuery.event.dispatch jquery.js:4409
elemData.handle jquery.js:4095

ChainNodePrototype.unchain = function(key, path) {
  var chains = this._chains;
  var node = chains[key];

  // unchain rest of path first...
  if (path && path.length>1) {
    key  = firstKey(path);
    path = path.slice(key.length+1);
    node.unchain(key, path);
  }

  // delete node if needed.
  node.count--;
  if (node.count<=0) {
    delete chains[node._key];
    node.destroy();
  }

};

更新-2014年9月10日 很抱歉耽搁了，我病了。这是请求的代码。这是Ember中抛出错误的方法

ChainNodePrototype.unchain ember.js:12138
ChainNodePrototype.remove ember.js:12114
unwatchPath ember.js:19438
unwatch ember.js:19508
removeObserver ember.js:16598
(anonymous function) ember.js:42755
apply ember.js:19278
sendEvent ember.js:14426
__exports__.default.Mixin.create.trigger ember.js:31415
apply ember.js:19280
superFunction ember.js:15752
EmberObject.extend.trigger ember.js:40418
apply ember.js:19280
superWrapper ember.js:18857
Renderer.willDestroyElement ember.js:38986
Renderer_beforeRemove ember.js:10757
Renderer_remove ember.js:10714
EmberObject.extend.destroy ember.js:40444
apply ember.js:19278
superWrapper ember.js:18857
apply ember.js:19278
superFunction ember.js:15752
CoreView.extend.destroy ember.js:42565
apply ember.js:19278
superWrapper ember.js:18857
(anonymous function) ember.js:40265
applyStr ember.js:19294
sendEvent ember.js:14420
notifyBeforeObservers ember.js:17429
propertyWillChange ember.js:17241
set ember.js:17715
trySet ember.js:17783
(anonymous function) ember.js:11601
tryable ember.js:14313
tryFinally ember.js:19059
suspendListener ember.js:14316
_suspendObserver ember.js:16628
Binding._sync ember.js:11600
DeferredActionQueues.invoke ember.js:674
DeferredActionQueues.flush ember.js:728
Backburner.end ember.js:134
Backburner.run ember.js:189
apply ember.js:19283
run ember.js:17857
__exports__.default.EmberObject.extend._bubbleEvent ember.js:38252
(anonymous function) ember.js:38203
jQuery.event.dispatch jquery.js:4409
elemData.handle jquery.js:4095

ChainNodePrototype.unchain = function(key, path) {
  var chains = this._chains;
  var node = chains[key];

  // unchain rest of path first...
  if (path && path.length>1) {
    key  = firstKey(path);
    path = path.slice(key.length+1);
    node.unchain(key, path);
  }

  // delete node if needed.
  node.count--;
  if (node.count<=0) {
    delete chains[node._key];
    node.destroy();
  }

};

下面是组件模板的代码

<header class="alertsModule__header">
    <svg class="shape-exclamation_point_warning" viewBox="0 0 65 65"><use xlink:href="#shape-exclamation_point_warning"></use></svg>
    <h1 class="alertsModule__title">{{total}} New Alerts</h1>
</header>
{{#each item in items}}
{{!-- When trying to just do the section and div tags in the #if statement the HTML broke. Not sure why --}}

{{#if item.NotificationRead}}
<section class="miniAlert--read">
    <div class="miniAlert--read__inner">
        <svg class="shape-{{unbound alertIcon item.NotificationType}}" viewBox="0 0 65 65"><use xlink:href="#shape-{{unbound alertIcon item.NotificationType}}"></use></svg>
        <span class="icon-arrow-right"></span>
        <h1 class="miniAlert--unread__title">{{item.NotificationName}}</h1>
        <span class="miniAlert--unread__timestamp">Today, 12:23PM</span>
    </div>
</section>
{{else}}
<section class="miniAlert--unread">
    <div class="miniAlert--unread__inner">
        <svg class="shape-{{unbound alertIcon item.NotificationType}}" viewBox="0 0 65 65"><use xlink:href="#shape-{{unbound alertIcon item.NotificationType}}"></use></svg>
        <span class="icon-arrow-right"></span>
        <h1 class="miniAlert--unread__title">{{item.NotificationName}}</h1>
        <span class="miniAlert--unread__timestamp">Today, 12:23PM</span>
    </div>
</section>
{{/if}}
{{/each}}
{{#link-to "alerts" class="seeAllBtn--alerts"}}
    <span class="seeAllBtn--alerts__inner">See all alert history</span>
    <span class="icon-arrow-right"></span>
{{/link-to}}

---

您是否可以尝试使用完整路径this.resource'vehicle.alerts'，this.resource'vehicle.members.members'等命名车辆资源中的所有嵌套资源？不幸的是，这没有什么乐趣。您是否可以共享引发该错误的代码，即通过单击堆栈跟踪中最顶端的链接？在调试Ember错误时，我经常发现这一点很有帮助。您还可以包含所包含组件的源代码吗？可能组件正在连接到路由上的willTransition或didTransition事件，并试图处理自身，或者可能只是NotificationRead属性。我发现，如果组件在中具有侦听器，并且在willClearRender中未切换为关闭，则会收到奇怪的错误消息。