Question

我正在尝试通过{{#link-to}}帮助程序发送查询参数，在我的路由中获取查询参数，然后根据发送的参数动态更改div的颜色。我可以看到我得到了正确的ID，但页面上似乎没有发生任何事情。

这是我的帮助链接

<li>{{#link-to 'usernotification' (query-params highlightedNotification=activeUserNotification.id)
                            classNames="read-more"}}Read more{{/link-to}}</li>

这是我的路线

export default BaseRoute.extend({
    accountService: Ember.inject.service('account'),
    userNotificationService: Ember.inject.service('usernotification'),

    queryParams: {
        highlightedNotification: {
            refreshModel:true
        }
    },

    beforeModel(params){
        this._super(...arguments);
        Ember.$("#"+params.queryParams.highlightedNotification).attr('style', 'background-color: black !important');
    },

});

谁能看到我哪里出错了？

Answer 1

在beforeModel挂钩处，路线尚未渲染！因此，您尝试修改的DOM元素不在其中。

您可以通过某种方式使其发挥作用。例如，通过使用afterRender包装代码来安排运行该代码以在Ember.run.scheduleOnce('afterRender', this, ()=>{/*your code*/});阶段工作。可能还有其他一些选择。

但这不是做事的方式。您应该将此数据传递给相应的组件。组件应决定如何显示。

此外，名称“highlightedNotification”可能是错误的。它应该类似于：“selectedNotification”，“currentNotification”，“notificationToBeAttentioned”。让组件决定如何强调注意力。 “highligting”只是一种引起注意的方式。

示例twiddle以说明建议的方式。

根据查询参数ember更改div颜色

1 个答案: