custom element not being processed in knockoutjs 3.2.0

Question

I have recently updated to 3.2 and I really want to make use of the custom elements and component bindings available.

Now I have made a custom component loader like this:

export class KnockoutComponentLoader implements IKnockoutTemplateLoader, IKnockoutViewModelLoader
{
    public loadTemplate(name: string, templateConfig: any, callback:Function)
    {
        console.log("Loading template: {0}".format(name));
        // Do some other stuff
    }

    public loadViewModel(name: string, viewModelConfig: any, callback:Function)
    {
        console.log("Loading vm: {0}".format(name));
        // Do some other stuff
    }
}

It is a typescript module but it is converted to JS and registered using:

var knockoutComponentLoader = new Framework.Loaders.KnockoutComponentLoader();
ko.components.loaders.unshift(knockoutComponentLoader);

I have debugged in FF and that all seems to be working as expected, then I do the following registrations a few lines later:

componentConfigurator.RegisterComponent("heading-menu", "shared", "HeadingMenuVM", "heading-menu");

I have a class for wrapping up the registration with my custom loader:

export class ComponentConfigurator implements IComponentConfigurator
    {
        public RegisterComponent(componentName: string, moduleName: string,  viewModelName: string, templateName: string)
        {
            var configuration = this.GetComponentConfiguration(moduleName,  viewModelName, templateName);
            ko.components.register(componentName, configuration);
        }

        public GetComponentConfiguration(moduleName: string,  viewModelName: string, templateName: string) : any
        {
            return {
                viewModel: {
                    moduleName: moduleName,
                    name: viewModelName
                },
                template: {
                    moduleName: moduleName,
                    name: templateName
                }
            };
        }
    }

Modules here is not a js module, its another notion within our framework. Anyway that all registers as expected then finally when ko.applyBindings() is called and there is an instance of the custom element component on the page i.e:

<heading-menu></heading-menu>

None of the console logging messages are spat out, and the heading menu is not injected with the relevant templates etc. So ignoring the specific implementation details of the loader and just looking at the registrations for loaders and components and the element usage should this be working?

As from the KO page on it I think I have followed all the steps, but cannot work out why its not firing...

Answer 1

I have solved the issue, mocked up in jsfiddle everything worked, so upon narrowing down what was different in the scenario, my ko.applyBindings were split out over certain elements. Turns out the new component added was not quite within the scope of them so just needed to be added into the scope of an existing applyBindings target.