如何在使用組件時定義模板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