How can I find out when ko.applyBindings(viewModel) is finished processing.

[brianm...@gmail.com]

I was looking for a ko.applyBinding(viewModel).ready(); style of solution, or something in the parameter list of the applyBinding, but I haven't found any documentation for discovering when the Binding is done yet.

[Gunnar Liljas]

ko.applyBinding is a synchronous method. It's done when it's done. Various (custom) bindings can incorporate asynchronous stuff, but that's outside applyBindings' control.

/Gunnar

2013/5/7 <brianm...@gmail.com>

I was looking for a ko.applyBinding(viewModel).ready(); style of solution, or something in the parameter list of the applyBinding, but I haven't found any documentation for discovering when the Binding is done yet.

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Brian Webb]

The problem with that is that right after I call that function, the next line I call some UI binding, which fail, unless I put in a time delay.

So synchronous is not a truly synchronous call.

 

For a sanity check, I did the following:

 

            ko.applyBindings(myApp.myVM);
 
            window.setTimeout("GetElementCounts()", 500);
            window.setTimeout("FormatElements()", 500);

The methods I call

        function GetElementCounts() {
            alert("colapsibles:" + $(".collapsibleDiv").length
                + "\nCheck boxes:" + $(":checkbox").length
                + "\nGroups:" + $(".checkbox-controlgroup").length
                + "\nmychild cases:" + $(".mychild").length
                + "\nchild divs:" + $(".mychild div").length
                );
        }
 
        function FormatElements() {
            $(".collapsibleDiv").collapsible();
            $(".mychild + div").collapsible();
            $(':checkbox').checkboxradio();
            $(".checkbox-controlgroup").controlgroup();
        }

All of the $('') calls refer to elements that are in my template. So the problem is that when I call the applyBindings, 

it may be up to a half a second before I can allow the rest of my code to execute, else, I risk my formatters failing.

I haven't tested this on a low bandwidth, which a half second may not be large enough.

For curiosity sake, these jQuery calls are to overcome a known jQueryMobile issue with knockout.js.

[Gunnar Liljas]

OK, I understand the problem, but applyBindings will not be able to help you. I think your best options are to either create custom bindings (e.g. "ko.bindingHandlers.collapsible") or to utilize the afterRender callback of the template binding. You don't have to use a named template. Just wrap your things in...

data-bind="template: { afterRender: fixthings }"

Of course, that will still not work if things bind asynchronously.

2013/5/7 Brian Webb <brianm...@gmail.com>

[Brian Webb]

Solved it. afterRender fires too often, and cannot be mixed with templateless style development.

So I looked at the mapping, and found where I can use a delegate principle from C++.  So I created a function with no content in my VM. I have my map routine to define the UI bind prior to the applyBindings. Everything works gorgeously.

I am going to add this one to my blog.

 

Thanks for helping me look at this issue differently.

 

Brian

[puneet...@gmail.com]

Can you please explain the concept of mapping to determine when applyBindings has finished?

Or can you give the link to your blog post please.

Thanks!