Как определить URL-адрес шаблона при использовании компонента

Question

Я использую компонент нокаута, но я хочу использовать шаблон-шаблон вместо встроенного шаблона. Вот компонент я использую: отображается

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