Question

我有一个Aurelia消息传递应用程序，当我收到一些新消息时，我需要动态更改该图标。

这些天来您可能已经观察到许多应用程序正在执行某些操作，以使用户知道状态更改。

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

考虑类似的问题here和here，在香草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);
  }

但是，这里非常明显的问题是非常类似于JQuery的方法，可以从我的视图模型内部直接操作DOM。

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

类似

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

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

还有一个有趣的approach to use canvas，我们可以使用动态图标。

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的绑定？

Answer 1

您完全可以做到这一点，请在此处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">

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

1 个答案: