Knockout Components - Custom Component Loaders

Question

I'm using Knockout Components and with System.js for module loading. I have a custom component loader: ``` var myComponentLoader = { loadComponent: function(name, componentConfig, callback) { System.import(componentConfig.myLoader) .then(function(loadedComponent) { var result = { template: ko.utils.parseHtmlFragment(loadedComponent.componentTemplate), createViewModel: loadedComponent.MyComponentViewModel } callback(result); }) // .catch(function(myError){ // alert(myError); // callback(null); // }); } }; // Register it ko.components.loaders.unshift(myComponentLoader); ko.components.register('my-component', { myLoader: './app/components/components' }); ``` But this fails with the following message: TypeError: undefined is not a function {stack: (...), message: "undefined is not a function"} This is how my result.template looks like: ```

This is my component template

``` This is how my result.createViewModel looks like: ``` function MyComp…

Accepted Answer

To provide your custom configuration handling logic you need to implement the `loadComponent` method as described in the documentation.

However you need to watch out what you return from it, because according to the documentation:

The `template` property has to contain an array of DOM nodes: so if your loader loads a string you need to parse it first with:

```
template: ko.utils.parseHtmlFragment(loadedComponent.componentTemplate)
```

The `createViewModel` has to contain a factory function, so not directly your view model constructor function. So you need to wrap it with

```
createViewModel: function (params, componentInfo) { return new loadedComponent.viewModel(params, componentInfo); } 
```

Knockout Components - Custom Component Loaders

Solution

Problem