在我的 Controller 中
init(){
this._super(...arguments);
document.body.classList.add("darkMode");
document.getElementById('mode').src = 'assets/images/logo-white'
}
在 Handlebars 上:
<img id="mode" src="assets/images/logo-black.png" alt="white-theme" width="188px" height="56px">
在尝试将深色主题应用到我的项目时,我成功地将类添加到其中,但是当我尝试通过查找它的 id 来更改 logo img src 时,它崩溃了(就像什么都没有不再显示),这可能是因为 init() 在加载实际图像之前执行所有操作,无法从 img 中获取 id。我还没有解决这个问题,所以任何想法都会很棒。
我这样做只是为了测试,稍后我会添加一个 if 子句来测试用户是否想要打开暗模式
最佳答案
你是对的。任何组件实例的 init
Hook 将在正确构建组件的 DOM(模板)之前执行,因此此时我们无法访问 DOM。您可以将所有与 DOM 相关的逻辑移动到名为 didInsertElement
的组件的另一个生命周期钩子(Hook)。只有在构建DOM之后才会被调用。
This twiddle应该能帮到你!
但是,建议使用声明式模板而不是手动更新 DOM,以避免意外错误。在这里,在这种情况下,模板可以声明性地写为
<img src={{if this.isDarkTheme "logo-white.png" "logo-white"}} width="188px" height="56px">
这样改变状态 isDarkTheme
就足以跟踪所有相关的 DOM/UI 部分。
关于javascript - 暗模式功能,在 init() 中更改 img src 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59399731/