Controlling Applybindings with knockout amd helpers

Question

I'm using Knockout AMD Helpers to load ViewModels, with the 'module binding' feature.

Usually, when I need to load remote data I use a deferred object to ensure that ko.ApplyBindings is only called after all my data is available on the ViewModel.

I created a sample jsfiddle to illustrate my issue using a delayed ajax call:

self.initialize = function () {
                    self.name("This is a sample article");
                    self.getArticleTypes(self.articleTypes);
                };

self.getArticleTypes = function (observableArticleTypes) {
                    var fakeData = {
                        delay: 5
                    };
                    $.ajax({
                        async: true,
                        cache: false,
                        type: 'post',
                        url: '/echo/json/',
                        data: fakeData,
                        success: function (data) {
                            observableArticleTypes([{
                                id: 1,
                                articleType: 'Breaking News'
                            }, {
                                id: 2,
                                articleType: 'Weather'
                            }]);

                            console.log("Data loaded from server");

                        }
                    });
                };

How can I architect my code, using the AMD Helpers but delaying the ApplyBindings until all my data is ready on the ViewModel?

It would be great if someone could add the tag 'knockout-amd-helpers' to the question as I don't have enough reputation to do so — Carlos Mendes
Seems to be the like this one? stackoverflow.com/questions/7427146/… — Dennis Kriechel

RP Niemeyer RP Niemeyer · Accepted Answer · 2013-08-05T15:08:51

With this type of scenario, applyBindings will have already happened, so you would either want to just allow observable sections to update as data becomes available or control particular sections using the if or with or template bindings.

For example, you could wrap your area in a:

<div data-bind="if: articleTypes().length">
    ....
</div>

Controlling Applybindings with knockout amd helpers

1 Answers