最好使用绑定在Aurelia中动态切换favicon

问题描述 投票:1回答:1

我有一个Aurelia消息传递应用程序,我需要在收到一些新消息时动态更改favicon。

你可能已经观察到许多应用程序正在做的事情是让用户了解状态变化。

当用户在其他选项卡上时特别有用。

在类似的问题herehere看来,这似乎是在vanilla JS或JQuery中非常直接的工作。

我目前对这个问题的看法是在我的视图模型中添加一个可以直接访问DOM的函数。

activate() {
    PLATFORM.addEventListener('newMessageIsReceived', this.msgReceived, true);
    PLATFORM.addEventListener('msgIsRead', this.msgRead, true);       
  }

  deactivate() {
    PLATFORM.removeEventListener('newMessageIsReceived', this.msgReceived);
    PLATFORM.removeEventListener('msgIsRead', this.msgRead);
  }

  msgReceived(event) {
    // new msg received. Change the favicon to alert mode 
    let link = PLATFORM.querySelector("link[rel*='icon']") || PLATFORM.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'alert.ico';
    PLATFORM.getElementsByTagName('head')[0].appendChild(link);
  }

  msgRead(event) {
     // msg read by the user, change the favicon back to default 
     let link = PLATFORM.querySelector("link[rel*='icon']") || PLATFORM.createElement('link');
     link.type = 'image/x-icon';
     link.rel = 'shortcut icon';
     link.href = 'default.ico';
     PLATFORM.getElementsByTagName('head')[0].appendChild(link);
  }

但是这里非常明显的问题是从我的视图模型中直接操作DOM的JQuery-ish方法。

考虑到这只是一个特例,我可以忍受它,但想知道是否有更好的Aurelia方法来实现这一目标。

就像是

<link rel="shortcut icon" type="image/ico" href.bind="faviconLink">

但是如何在索引页面的头部使用绑定? Aurelia确实在每个路线导航上更新页面标题,并且由于标题也在aurelia-app根目录之外,因此应该可以从Aurelia应用程序内部绑定/操纵其他头部属性。对?

还有另一个有趣的approach to use canvas,我们可以有动态的favicons。

const canvas = document.createElement('canvas')
canvas.height = 64
canvas.width = 64

const ctx = canvas.getContext('2d')
ctx.font = '64px serif'
ctx.fillText('🛰', 0, 64)
console.log(canvas.toDataURL())

const favicon = document.querySelector('link[rel=icon]')
favicon.href = canvas.toDataURL()

但是又如何避免直接DOM操作并使用Aurelia的绑定,即使对于这种方法?

javascript html5 aurelia aurelia-binding aurelia-framework
1个回答
4
投票

你可以完全做到这一点,在这里演示https://1rn1866v64.codesandbox.io/

https://codesandbox.io/s/1rn1866v64的源代码演示

复制在话语https://discourse.aurelia.io/t/better-know-a-framework-21-enhance-document-head-with-aurelia/2374

您想要的是一种将document.head模板增强为对象作为视图模型的方法。您可以在此处找到该演示的代码。通常它看起来很简单:

au.enhance({
  root: someObjectAsViewModel_for_the_enhancement,
  host: document.head
})
<link rel="icon" href.bind="iconHref">
© www.soinside.com 2019 - 2024. All rights reserved.