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

Question

在我的控制器中

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

在尝试将深色主题应用于我的项目时，我成功地向其中添加了 class，但是当我尝试通过查找更改 logo img src 时它的 id，它崩溃了（因为什么都没有显示了），这可能是因为 init() 在加载实际图像之前做了所有事情并且不能从 img 中获取 id。我还没有解决这个问题，所以任何想法都会很棒。

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

Answer 1

你是对的。任何组件实例的 init 挂钩将在正确构建组件的 DOM（模板）之前执行，因此我们此时无法访问 DOM。您可以将所有与 DOM 相关的逻辑移动到名为 didInsertElement 的组件的另一个生命周期挂钩，该挂钩仅在构建 DOM.

后调用

This twiddle应该能帮到你！

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

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

这样改变状态 isDarkTheme 就足以跟踪所有相关的 DOM/UI 部分。

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

Dark mode feature, changing img src in init() does not work

javascript

ember.js

ember-paper