javascript - 最好使用绑定(bind)在 Aurelia 中动态切换图标

Question

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

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

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

调查类似问题 here和 here在 vanilla JS 或 JQuery 中似乎非常直接。

我目前对这个问题的看法是在我的 View 模型中添加一个可以直接访问 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);
  }

但这里非常明显的问题是从我的 View 模型内部直接操作 DOM 的非常 JQuery 风格的方法。

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

有点像

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

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

还有一个有趣的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 的绑定(bind)，即使对于这种方法也是如此？

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 模板增强为对象作为 View 模型的方法。您可以在此处找到该演示的代码。通常它看起来很简单:

au.enhance({
  root: someObjectAsViewModel_for_the_enhancement,
  host: document.head
})

<link rel="icon" href.bind="iconHref">