如何在使用组件时定义模板url

Question

我正在使用淘汰组件，但我想使用模板url而不是内联模板。下面是我使用的组件：

ko.components.register('cat-data', { 
    viewModel: { 
     createViewModel: function(params, componentInfo) { 
      var self = this; 

      self.data = (params && params.data) || []; 

      return self; 
     } 
    }, 
    template: "/Scripts/CatdDataTemplate.html" 
}); 

当我运行这个/Scripts/CatdDataTemplate.html显示，而不是实际的模板。

Answer 1

作为字符串的模板属性将作为要应用的实际模板作为基础分析。如果你想从一个URL加载一个模板，你可以这样做，使用自定义的装载机，如knockout documentation定义，引用如下：

如果您自定义的加载实现loadTemplate和/或loadViewModel， 那么你可以将自定义代码插入到加载过程中。您也可以使用这些函数来解释自定义配置格式。

例如，您可能需要启用配置的格式，如 如下：

ko.components.register('my-component', { 
    template: { fromUrl: 'file.html', maxCacheAge: 1234 }, 
    viewModel: { viaLoader: '/path/myvm.js' } 
}); 

...你可以这样做，使用自定义装载机。

下定义加载程序将采取一个fromUrl值配置装载模板 护理：

var templateFromUrlLoader = { 
    loadTemplate: function(name, templateConfig, callback) { 
     if (templateConfig.fromUrl) { 
      // Uses jQuery's ajax facility to load the markup from a file 
      var fullUrl = '/templates/' + templateConfig.fromUrl + '?cacheAge=' + templateConfig.maxCacheAge; 
      $.get(fullUrl, function(markupString) { 
       // We need an array of DOM nodes, not a string. 
       // We can use the default loader to convert to the 
       // required format. 
       ko.components.defaultLoader.loadTemplate(name, markupString, callback); 
      }); 
     } else { 
      // Unrecognized config format. Let another loader handle it. 
      callback(null); 
     } 
    } }; // Register it ko.components.loaders.unshift(templateFromUrlLoader); 

来源：http://knockoutjs.com/documentation/component-loaders.html#example-2-a-component-loader-that-loads-external-files-using-custom-code