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

Question

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

您可能已经观察到许多应用最近都在做一些事情，让用户知道状态变化。

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

调查类似的问题 here and here 在 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);
  }

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

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

类似于

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

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

还有一个有趣的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 中动态切换图标

Switching favicon dynamically in Aurelia preferably using binding

html

javascript

aurelia