如何阻止Knockout缓存已加载的组件及HTML模板？

参考Stack Overflow上的方案，我使用以下代码尝试阻止Knockout缓存已加载的组件：

ko.components.get = (function(fn) {
  return function(componentName, callback) {
    ko.components.clearCachedDefinition(componentName);
    fn(componentName, callback);
  };
})(ko.components.get);

但该代码仅能清除JS文件的缓存，无法清除HTML模板的缓存。请问如何解决这一问题？

• 清除Knockout内部模板缓存：Knockout会将加载后的模板内容存在ko.components._templateCache对象中，在原有代码基础上增加该缓存的清除逻辑即可：

  ko.components.get = (function(fn) {
    return function(componentName, callback) {
      // 清除组件定义缓存
      ko.components.clearCachedDefinition(componentName);
      // 清除对应模板缓存
      if (ko.components._templateCache) {
        delete ko.components._templateCache[componentName];
      }
      fn(componentName, callback);
    };
  })(ko.components.get);
  

• 处理浏览器层面的模板缓存：如果模板是通过HTTP请求加载的，浏览器本身可能会缓存静态文件，可通过以下方式强制刷新：

  • 若使用AMD加载器（如RequireJS），配置全局URL参数添加时间戳：

    var require = {
      paths: {
        'templates': '/path/to/templates'
      },
      urlArgs: 'v=' + (new Date()).getTime()
    };
    

  • 若直接使用template绑定加载外部模板，在模板名称/URL后拼接时间戳：

    <div data-bind="template: { name: 'my-template?v=' + Date.now() }"></div>
    

内容的提问来源于stack exchange，提问作者Abu Ahmed