CODEWITHSUNDEEP
knockout.jsrequirejsamdknockout-amd-helpers
Carlos Mendes
Carlos Mendes

Reputation: 2000

Controlling Applybindings with knockout amd helpers

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?

Upvotes: 0

Views: 481

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

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>

Upvotes: 1

Related Questions