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

Posted 2023-03-10

【中文标题】在 Aurelia 中动态切换网站图标，最好使用绑定

【英文标题】：Switching favicon dynamically in Aurelia preferably using binding

【发布时间】：2019-03-15 05:16:46

【问题描述】：

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

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

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

查看 here 和 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);
  

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

考虑到这只是一个特例，我可以接受它，但想知道是否有更好的 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 的绑定，即使是这种方法？

【参考方案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">

【讨论】：

感谢 bigopon。我得到了这个想法，它解决了我的问题，但如果我也可以访问演示的完整代码，那就太好了，它对其他用户的参考也很有用。或者，您可以在 *** 上发布主要部分，以防演示网站有一天不同步。

对不起，我应该把它包括在内。请查看更新后的答案