时间戳

首页 > 解决方案 > 暗模式功能，在 init() 中更改 img src 不起作用

javascript - 暗模式功能，在 init() 中更改 img src 不起作用

问题描述

在控制器中我有

  init(){
    this._super(...arguments);
    document.body.classList.add("darkMode");
    document.getElementById('mode').src = 'assets/images/logo-white'
  }

在车把中：

<img id="mode" src="assets/images/logo-black.png" alt="white-theme" width="188px" height="56px">

在尝试将深色主题应用于我的项目时，我成功地将类添加到其中，但是当我尝试通过查找其 id 更改徽标 img src时，它崩溃了（因为不再显示任何内容），这可能是因为init()在加载实际图像之前完成所有操作，并且不能从 img 中获取 id。我还没有解决方案，所以任何想法都会很棒。

我这样做只是为了测试，稍后我将添加一个 if 子句来测试用户是否想要开启暗模式

标签： javascriptember.jsember-paper

解决方案

你是对的。任何组件实例的init钩子都将在组件的 DOM（模板）正确构造之前执行，因此我们此时无法访问 DOM。您可以将所有与 DOM 相关的逻辑移动到被调用组件的另一个生命周期钩子中，该钩子didInsertElement只有在 DOM 构建后才会被调用。

这个小技巧应该可以帮到你！

但是，建议使用声明式模板而不是手动更新 DOM 以避免意外错误。在这里，在这种情况下，模板可以声明式地写成

<img src={{if this.isDarkTheme "logo-white.png" "logo-white"}} width="188px" height="56px">

这样更改状态isDarkTheme就足以跟踪所有相关的 DOM/UI 片段。

推荐阅读