component "afterrender" using binding events

[mbest]

Adds descendantsComplete event that is used by components to notify of completion, waiting until descendant components are also complete.

This replaces #2303.

[mbest]

This supports a special callback method on components called koDescendantsComplete which is called once all descendant bindings (including async components) are complete.

@brianmhunt I hope you can take some time to look over these changes and provide feedback. Thanks.

[brianmhunt]

Excellent 😀

[siimnelis]

This is excellent feature that I have been missing.
I have used it now in one of the projects we use knockout and it works great.

There is one issue I'm still having and maybe there is a solution for that also. In our project when we bind our component, everything in the viewmodels markup is wrapped inside a ko if statement.

<!-- ko if:isLoaded -->

business logic here
<span data-bind="text:example"></span>

<!-- /ko -->
<!-- ifnot:isLoaded -->
show loading mask
<!-- /ko -->

The viewmodels data is loaded async and when the data is received, the viewmodel is initialized in a callback and the isLoaded observable is marked true.

self.getViewModel(function(viewModel){

self.example=ko.observable(viewModel.exaple);

});

Now the viewModel has example obervable and it's safe to bind the markup.

The problem with the koDescendatsComplete binding event is that it fires the first time around and it doesn't know about the nested components inside if loaded(that's expeted).

<!-- ko if:isLoaded -->

business logic here
<span data-bind="text:example"></span>
<nested-async-component-here-which-loads-the-same-way>
<!-- /ko -->

What I'm trying to achieve is to mark the parent loaded only when all the nested children are loaded as well and then show the finished markup.

I tried to use the childrenComplete binding handler in this case but it doesn't work the way I hoped.

<!-- ko if:isLoaded -->
<div data-bind="childrenComplete:childrenComplete"> 
business logic here
<span data-bind="text:example"></span>
<nested-async-component-here-which-loads-the-same-way>
<!-- /ko -->

childrenComplete function runs before the nested-async-component-here-which-loads-the-same-way koDescendatsComplete binding event.

I also tried to subscribe ko.bindingEvent(div, "koDescendantsComplete",function(){}); It throws an error that it can't bind to that nodetype(this was expected as well, was just trying).

Would it be possible to achieve such a binding handler/event which notifies when a binding handlers such as if, nested components have completed. Maybe there already a solution to achieve similar results already today, that I'm just not aware right now.

Thank you is advance

[mbest]

@siimnelis Components are designed so that the viewmodel code and/or template can be loaded asynchronously. The component loader documentation describes how to do this. Would that work for you?

[siimnelis]

The viewmodel code and template both are loaded asynchronously using requirejs as amd. I have looked into component loader documentation.
The problem comes from that the viewmodels data itself also is loaded asynchronously.

This example is simplification.

define(['knockout', 'text!templates/partialViews/example', 'partialViewPage'],
    function (ko, htmlString, partialViewPage) {
        function viewModel(params) {

            var self = partialViewPage("UrlToLoadDataFrom", params);

            //when component is loaded first time it initializes the async data loading from server
            self.getViewModel(function (viewModel) {
                self.example= ko.observable(viewModel.example);
            }, {Id:1}); //can pass query string arguments to server

            return self;
        }

        return {
            viewModel: {
                createViewModel: function (params, componentInfo) {
                    params.element = componentInfo.element;
                    return viewModel(params);
                }
            }, template: htmlString
        };
    });

The partialViewPage.js adds basic functionality to all asynchronously loaded viewModels.

The partialViewPage wraps components markup inside ko if statement.

params.element.innerHTML = "<!-- ko if:isLoaded() && !loadingFailed() -->\r<div data-bind='visible:ready, childrenComplete:childrenCompleteCallback'>" +params.element.innerHTML + "</div>\r<!-- /ko -->";

There is the method getViewModel and isLoaded observable and other functionality.

self.isLoaded = ko.observable(false);

self.getViewModel = function (callback, data) {
         
//loading data with jquery ajax call on success callback if everthing is okey callback will be invoked with the viewmodel loaded from server and isLoaded is marked true, which renders the actual html

            $.ajax(viewmodelUrl,
                {
                    dataType:'json',
                    data:data,
                    success:function(viewModel) {
                        aetService.resetSessionTimer();
                        
                       callback(viewModel);

                        self.isLoaded(true);

                    }
                });

}

I thought about maybe I could load data from server inside createViewModel function and maybe make a custom loader. But the createViewModel must return viewmodel instance synchronously.

viewModel: {
                createViewModel: function (params, componentInfo) {
                    params.element = componentInfo.element;
//cant load data async here and pass it to there viewModel instance as a parameter

                    return viewModel(params);
                }

I look more into maybe I can somehow still achieve this with custom loader but from the documentation I understand for now that the job of a component loader is to asynchronously supply a template/viewmodel pair for any given component name. Viewmodel being the javascript class, not the data itself.

I hoped I could write custom loading for loadViewModel(name, templateConfig, callback), but the documentation states it must return the viewModel synchronously and thats the problem.

I think if I could achieve something like this, would solve the problem the best way.

viewModel: {
                createViewModel: function (params, componentInfo, callback) {
                    params.element = componentInfo.element;
//load data async and when done invoke callback with the data
                callback(viewModel(viewModelAsData, params));
                }

I could use componentInfo.element to add the mask to the node etc.

[mbest]

This is an interesting approach. I think that rather then the if binding, which can be either true or false at any time, we need a binding that encapsulates the idea of async loading. I'm thinking to call it when, based on #2113.

[siimnelis]

It's a good idea to have a binding that encapsulates the idea of async loading.

From the #2113 I understand the idea of when is to only run it once. With async loading there is also a usecase for reloading the view. I can call

self.getViewModel(function(viewModel){}); //marks isLoading(false) and the loading mask shows up until loaded

any number of times, which reloads the view.

It's comes handy when a POST request changes server state and I don't have the information how it affected the UI state(some webservice requests).

Normally I update the UI from POST requests response.

[brianmhunt]

It looks like bindingApplied is no longer used and can be removed from this context.

[mbest]

Thanks.

[ShallomAkporuku]

I am new to KO. I need to know when a component has finished updating DOM as stated in #1475. The issue is stated to be resolved by the descendantsComplete event. There is currently no documentation on how to implement this. Please can I be provided with a JSFiddle example on how the descendantsComplete event works?

I currently get alot of flicker as each value gets rendered one by one on the webpage after applying bindings. I am looking for a way only render after all the values in the array has been computed.

[Totati]

I am new to KO. I need to know when a component has finished updating DOM as stated in #1475. The issue is stated to be resolved by the descendantsComplete event. There is currently no documentation on how to implement this. Please can I be provided with a JSFiddle example on how the descendantsComplete event works?

Hi, @ShallomAkporuku search for those in the repository. They have tests, so you can find out how to use them.

[phil-warner]

Additional example of implementing koDescendantsComplete also shown in this test.