Add "createTemplate" to Component Templates analogous to createViewModel

[sccooper]

I would like custom elements to be allowed to define just a view model and leave the template up to a 3rd party designer on a per element basis, so templates for components could use the html between the custom element tags or be specified as a parameter, e.g.:

<my-component>
<span data-bind="text: foo"></span>
</my-component>

or:

<my-component params="custom-template: 'custom-id'"></my-component>

I added this functionality by allowing templates to have a createTemplate property when registering custom elements that is a function that takes (data, info) like createViewModel does.

I can then implement the functionality I want like this:

ko.components.register("my-component", {
    viewModel: { ... },
    template: {
        createTemplate: function (data, info) {
            if (data["something"]) {
                return "<something></something>";
            } else {
                return {
                    element: info.element
                };
            }
        }
    }
});

I think this approach is generally useful, but it does affect loaded configs which now have a createTemplate property when resolved, not a template property that is an array of nodes. I have tried to handle existing loaders by first looking for the template property.

Would you like to see the patch or is there a better way of doing this?

[SteveSanderson]

We did consider this a while back, and specifically wanted to avoid any scenario where a loaded component has to make further async network calls in order to render. This is why createViewModel has to return synchronously, for example. Otherwise the performance in a large UI would be horrendous.

So if there was a createTemplate entry point, it would have to complete synchronously, which would be very confusing to people who think they want to load templates from external files on demand. The existing APIs are designed to avoid this confusion and potential perf issue.

I'm open to coming up with possible designs in this area for a future version, but I think we should wait and see how larger numbers of people get on with KO components after 3.2.0 is released before trying to guess whether such a feature is needed and if so how it would work. Maybe it won't be a common request :)

[sccooper]

Ok - I hadn't considered that because my use case is strictly synchronous.

I do think it seems like something's missing when every custom component is an empty tag - what I particularly like about knockout is that the view model and html can be together - having to reference a separate template away from the location in the html that the component is used seems unnecessary.

Alternatively, would you consider allowing a component to not define a template and have that mean "apply the view model to the inner html of the custom element"?

That would just require checking for this in the binding handler and skipping cloneTemplateIntoElement.

You could then do something like this if you still wanted separately defined templates:

<my-component params="foo: 'bar'">
<div data-bind="template: 'template-one'></div>
</my-component>

<my-component params="foo: 'baz'">
<div data-bind="template: 'template-two'></div>
</my-component>

[lagoasoft-lucasschmidt]

Ko Components feature is looking amazing, but I have an issue regarding the dynamic loading of templates.

I want to be able to say that a viewModel is an URL, and a template is an URL and to have both dynamically fetched. The issue here is that I do not use AMD, I am using browserify.

The good thing about browserify is that I can require a JADE file directly as a template and it will be a HTML String during run time. But, since there is no way for me to load a template or viewModel async, I cant create a function to fetch the HTML/ViewModel.

Do you guys have any ideas regarding this?

Thanks again for the work in KO, its amazing stuff.

edited: as far as Ive seen, I would need to implement by own component loader, is this correct?

[rniemeyer]

@lucastschmidt - you are likely going to want to work with a custom loader. there will be official docs coming (preview here or you can take a look at the bottom of my blog post here. The last couple of examples in the documentation should give you good direction in this area. Hope that helps.

[lagoasoft-lucasschmidt]

Sure @rniemeyer, thanks, I already took a look at your blog post, great stuff.

[iratherscribble]

I really wish I came across this sooner. This is great news and I'm looking forward to Components, but I just spent the last month and a half implementing something similar myself for a client project (dynamically creating a view model and dynamically creating the template to bind to, both at runtime). I'll need to review the aims and functionality before I chime in with questions.

I do think adding a createTemplate entry point would be a great future addition. For me, the use case is to allow users to create new content in a CMS from a cross-domain web application. The user has a single form configured to a specific repository. The types of content available to create is determined at runtime and presented as a dropdown list to the user. By selecting the content type from a dropdown list, the fields tied to the content type display.

This is a re-usable solution, so there is no way to know what fields there are, or the data types of the fields (which may require a date picker or a dropdown list of choices) until the user selects the content type.

Being able to create a view model and create a template at runtime would be very helpful. Maybe to make it less confusing to people that it has to complete synchronously is to implement it as a promise?

[lagoasoft-lucasschmidt]

@iratherscribble , I believe you can implement your own componentLoader and that would solve all your problems.

Did u take a look at https://github.com/knockout/knockout/blob/gh-pages-3.2.0/documentation/component-loaders.md ?

[iratherscribble]

@lucastschmidt I haven't looked too deep into 3.2 yet. I'll read this over in more depth, but at first look, I think you're right. Thanks!

[iratherscribble]

@lucastschmidt I looked into this a lot more and created an implementation, but there seems to be an assumption that a template already exists. Or in the case of the custom component loader, that the template can be created independently from the knowledge of the view model. I don't see how createViewModel would be useful if you already know which template or the content that is within a template is going to be used. It would be helpful if I could pass the view model to the logic that loads the template or creates the DOM nodes so that logic can determine which types of elements to create (or to not create). Each view model loaded can have properties of different data types, such as dates, or numbers, or choices that require dropdowns. These properties can have different names and they may require different bindings for handling events specific to that view model.

[lagoasoft-lucasschmidt]

@iratherscribble, sorry, I need more info. But, if all your users can create content, and you save some kind of JSON describing it, you probably shouldnt use components to accomplish this, since each of your user content can be unique.

But, you can simply use KO for that. Creating some crazy view model that controls everything based on those JSON.

Now, if you actually have templates that you guys developed, and the user simply selects them, then you can create a component for every single one of your templates, and when the user selects in the dropdown, the dropdown could be mapped to the template name, and then you use data-bind="component:..." to dynamically change/start the component in your page.

[iratherscribble]

@lucastschmidt and @rniemeyer The solution is pretty complex and I don't want to go too far off-topic for this issue, but basically, a custom component loader is not going to work at this point for a few reasons:

• The viewmodel cannot be passed to the logic responsible for constructing the template.

If you are dynamically constructing a viewmodel, you are going to need to reference the properties of the viewmodel in order to construct a template. During component registration, there is no way to pass the constructed viewmodel to the logic that constructs the component's template.

• The component lifecycle. The template is injected into the container before the viewmodel.
• Custom component loaders are not allowed to return anything synchronously.

Below is an pseudo-example of an implementation. There are two containers for loading components: one for a selection of content types and the other is to render the form for a user to fill out and attach a document to upload.

<div data-bind="component: ComponentBindingValue" id="selectorContainer"></div>
<div data-bind="component: ComponentBindingValue" id="container"></div>

Using AMD to load JavaScript, each of these container elements gets bound to decoupled logic. The first to a component for content type selection. The second is for rendering the form fields associated with the selected content type.

    ko.components.register('component-contentType-select', {
        viewModel: RepositoryViewModel,
        template: '<select id="contentTypes"' +
              'data-bind="foreach: AvailableContentTypes, ' +
              'value: ContentType, '+
              'event: { change: OnChange }">' +
          '<option data-bind="text: $data.Name, value: $data.Id"></option>' +
          '</select>'
    });

    ko.components.register('component-blank', {
        template: '<div>Please select a content type to submit.</div>'
    });

    $(document).ready(function () {
        repositoryOuterViewModel.ComponentBindingValue({
            name: 'component-contentType-select',
            params: {
                repositoryName: 'RepositoryName',
                onChangeHandler: contentTypeChanged
            }
        });

        contentTypeOuterViewModel.ComponentBindingValue({
            name: 'component-blank'
        });

        ko.applyBindings(repositoryOuterViewModel, selectorContainerNode);
        ko.applyBindings(contentTypeOuterViewModel, containerNode);
    });

When the selected content type in the drop down lists changes, a function is called to get the ID of that content type and create a new component with the name of that content type ID if it is not already registered. The observable for the component binding is updated and passed parameters that will be used to talk to an external service to get the model of the content type. That model will be used to construct the viewmodel and then the template to render that viewmodel.

To try to work around this constraint of not being able to pass the viewmodel, I attempted to follow the documentation for registering components as a single AMD module.

    function contentTypeChanged(currentItem) {
            var contentTypeId = ko.utils.unwrapObservable(currentItem.ContentType);

        if (!ko.components.isRegistered(contentTypeId)) {
            ko.components.register(contentTypeId, { require: 'ComponentBuilder' });
        }

        contentTypeOuterViewModel.ComponentBindingValue({
            name: contentTypeId,
            params: {
                repositoryName: 'RepositoryName',
                contentTypeId: contentTypeId,
                withChangeTracking: true
            }
        });
    }

The ComponentBuilder module that should be loaded appears below.

     var ComponentBuilder = (function () {
        function ComponentBuilder(params) {
            var constructedViewModel,
                constructedTemplate,
                builder = new b.ViewModelBuilder();

            constructedViewModel = builder.createViewModel(params);
            constructedTemplate = builder.createTemplateForViewModel(constructedViewModel);

            return { viewModel: constructedViewModel, template: constructedTemplate };
        }
        return ComponentBuilder;
    })();
    exports.ComponentBuilder = ComponentBuilder;

It has been written a few different ways, but during debugging, it doesn't even get to the point of a new instance being created. I have had issues because I think ko.bindingHandlers.component.init attempts to call cloneTemplateIntoElement before calling creating the viewmodel. There is always an error that the component does not have a template. This occured with the default component loader and with a custom component loader.

    ko.components.get(componentName, function (componentDefinition) {
        // If this is not the current load operation for this element, ignore it.
        if (currentLoadingOperationId !== loadingOperationId) {
            return;
        }

        // Clean up previous state
        disposeAssociatedComponentViewModel();

        // Instantiate and bind new component. Implicitly this cleans any old DOM nodes.
        if (!componentDefinition) {
            throw new Error('Unknown component \'' + componentName + '\'');
        }
        cloneTemplateIntoElement(componentName, componentDefinition, element);
        var componentViewModel = createViewModel(componentDefinition, element, componentParams),
            childBindingContext = bindingContext['createChildContext'](componentViewModel);
        currentViewModel = componentViewModel;
        ko.applyBindingsToDescendants(childBindingContext, element);
    });

@SteveSanderson Support for a createTemplate entry point to allow a factory or builder to create a template based off the viewmodel information is really critical for me. At this point, I am willing to do any workaround to get this working in the meantime.

[lagoasoft-lucasschmidt]

@iratherscribble, cant you simply define:

    function contentTypeChanged(currentItem) {
            var contentTypeId = ko.utils.unwrapObservable(currentItem.ContentType);

       var params =  {
                repositoryName: 'RepositoryName',
                contentTypeId: contentTypeId,
                withChangeTracking: true
        };

        if (!ko.components.isRegistered(contentTypeId)) {
            ko.components.register(contentTypeId,  new ComponentBuilder(params));
        }

        contentTypeOuterViewModel.ComponentBindingValue({
            name: contentTypeId,
            params: params
        });
    }

[iratherscribble]

@lucastschmidt That wouldn't work. Registering the component is only adding the component information to the config registry. It isn't until the binding value changes does the observable cause a new instance of the component to be created. It's also being created through an AMD, so it needs to have the require key in the component registration because the script is loaded on-demand.

This is really a functionality change or feature request to allow synchronous loading from component loaders or to change the design to not assume that a template can be loaded before a viewmodel or that a template is entirely dependent-less on the viewmodel. I am sure there are some use cases where that works just fine, but not when you are constructing both the viewmodel and template at runtime.