javascript - 为什么我的通知的 Ember 组件没有被读取/渲染？

Question

我一整天都被这个问题难住了，并用尽了我能想到的所有可能的原因。问题是，如果用户有通知，我的 Handlebars 不会显示通知。

由于还处于早期阶段，我只是通过单击“登录”按钮来测试它，它会向用户(在本例中为我)发送通知，以便我可以看到它的工作原理。

简单来说...它不起作用。我在网页上附加了一张显示最终结果的图像，它似乎注释掉了 Handlebars 线，并忽略它。我不知道为什么。

我知道正在读取数据，因为其他类/组件(.js 文件和其他文件)能够在控制台中返回数据。我的“main-header”组件和“main-footer”组件在所有页面上都可以正常渲染/读取。

我还使用了另一个使用此功能的网站代码的几乎完全相同的副本。而且效果很好。最初我做了一些更改，但之前我复制粘贴了我认为相关的所有内容，但它仍然不起作用。

这是 index.hbs 的 HTML(屏幕截图中显示的主页/页面)

<div>

    {{main-header}}
    {{notification-list notifications=application.currentNotifications closeNotification='closeNotification'}}z

</div>

<!--Navbar - Home, About and Contact. Fixed position follows user down page-->
<header id="header" role="banner">
  <!-- Navigation -->
</header>

<!--Main Body-->
<div class="container">
  <br>
  <br><br><br><br><br><br><br>
  <button class="btn btn-primary btn-block btn-center" type="submit" {{action 'login'}}>
    Sign In
    &nbsp;
  </button>


  <!--Footer containing copyright, logos and social media-->
{{main-footer}}
</div>

主页的 .js 文件；

App.IndexRoute = Ember.Route.extend({

    model: function() {

    }
});

App.IndexView = Ember.View.extend({
    templateName: 'index'
});

App.IndexController = Ember.Controller.extend({

    needs: ['application'],
    currentNotifications: Ember.computed.alias("controllers.application.currentNotifications"),

    actions: {
        login: function() {
            console.log(this.currentNotifications);
            this.send( 'pushNotification', 'Message Sent', false );
        }
    }
});

notification-list.hbs 文件(顺便说一句，原始文件是使用 '{{#each x in y}}' 制作的，由于弃用，我不得不更改它，但最终它应该我相信工作原理是一样的；

 <div class="container notify">
  <div class="row">
      {{#each notifications as notification}}
          {{#if notification.error}}
            <div class="alert alert-danger">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true"
                  {{action 'closeAlert' notification}}>
                ×
              </button>
              <span class="glyphicon glyphicon-hand-right"></span> <strong>{{notification.title}}</strong>
              <hr class="message-inner-separator">
                {{#each notification.message as message}}
                  <p>
                    <b>{{message.field}}</b>{{#if message.value}}: {{message.value}}{{/if}}
                  </p>
                {{/each}}
            </div>
          {{else}}
            <div class="alert alert-info">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true"
                  {{action 'closeAlert' notification}}>
                ×
              </button>
              <span class="glyphicon glyphicon-ok"></span> <strong>{{notification.title}}</strong>
              <hr class="message-inner-separator">
              <p>{{format-text notification.message}}</p>
            </div>
          {{/if}}
      {{/each}}
  </div>
</div>

以及关联的通知列表的 .js 文件；

App.NotificationListComponent = Ember.Component.extend( {
    notifications: [],

    lastLength: 0,

    didInsertElement: function(){
        if(this.notifications != null){
            this.notifications.forEach(function(notification){
                Ember.run.later( this, function () {
                    if ( this.notifications.indexOf( notification ) >= 0 ) {
                        this.send( 'closeAlert', notification );
                    }
                }, 3000 );
            }, this)
        }
    },

    ////DO NOT REFERENCE IN HANDLEBARS
    timeout: function() {
        var lastLength = this.get( 'lastLength' );
        var notifications = this.get( 'notifications' );

        //check it was an added notification, not a destroyed one
        if ( notifications.length >= lastLength ) {
            var index = notifications.length - 1;

            if ( index >= 0 ) {
                var notification = notifications[ index ];
                Ember.run.later( this, function () {
                    if ( notifications.indexOf( notification ) >= 0 ) {
                        this.send( 'closeAlert', notification );
                    }
                }, 3000 );
            }
        }
        //update last length
        this.set('lastLength', notifications.length);
    }.observes('notifications.length'),

    actions: {
        closeAlert: function( notification ){
            this.sendAction('closeNotification', notification);
        }
    }

});

最后是app.js文件。我遗漏了一些我认为不相关的部分(例如适配器和存储等)，如果需要的话请让我知道，但它几乎是标准/默认的；

App.ApplicationController = Ember.Controller.extend({

    currentNotifications: [],

    notification: Ember.Object.extend( {
        title: null,
        message: null,
        error: false
    } ),

    //Don't Call Directly, Use Route.Send to activate
    pushNotification: function( message, error ) {
        var currentNotifications = this.get( 'currentNotifications' );
        var notification = new this.notification;
        var test = error ? 'Failure' : 'Success';

        notification.setProperties( {
            title: test,
            message: message,
            error: error
        } );

        //Remove old message
        if(currentNotifications.length >= 4) {
            this.send('closeNotification', currentNotifications[0]);
        }

        currentNotifications.pushObject( notification );
    },

    closeNotification: function( notification ){
        var currentNotifications = this.get( 'currentNotifications' );
        var index = currentNotifications.indexOf(notification);
        //remove notification
        currentNotifications.removeAt(index);
    },

    updateCurrentPath: function() {
        App.set('currentPath', this.get('currentPath'));
    }.observes('currentPath')
});

该图像显示了上述代码的结果。突出显示的行 () 是通知列表组件应该所在的行

Answer 1

如果这是您的全部代码(未修改)，那么您似乎只是给了它一个错误的值。在模板中，您可以像这样传递通知:

notifications=index.currentNotifications

同样，假设这是您的全部代码，我看不到名为 index 的变量来自何处。您可能应该使用controller.currentNotifications。