Question

我整天都对这个问题感到困惑，并且已经用尽了我能想到的所有可能的理由。问题是如果用户没有显示通知，我的车把会显示。

在早期，我只是在点击“登录”时对其进行测试。按钮，它向用户发送通知（在这种情况下我），这样我就可以看到它正常工作。

简单地说......它不起作用。我在网页上附上了显示最终结果的图片，似乎注释了车把线，并忽略了它。而且我不知道为什么。

我知道正在读取数据，因为其他类/组件（.js文件和其他文件）能够在控制台中返回数据。我的主要标题是＆＃39;组件和＆＃39;主要页脚＆＃39;组件在所有页面上呈现/读取都很好。

我还使用了另一个使用此功能的网站代码的足够精确的副本。而且效果很好。最初我做了一些修改，但早些时候我复制粘贴了我认为相关的所有内容，但它仍然没有用。

以下是 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 文件（顺便说一下，原文是使用＆＃39; {{＃each x in y}}＆＃39;而我必须更改，因为弃用，但最终它应该与我相信的一样;

 <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>

以及相关的通知列表<。strong 文件;

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。

为什么我的通知的Ember组件未被读取/呈现？

1 个答案: