Binding happens before service call sometimes

[Raj Kris]

Code Snippet:

<div class="form-group">

                            <label for="ddlPaymentTerms">

                                Payment Terms

                                <i class="fa fa-info-circle help" data-toggle="tooltip" data-placement="top" title="Payment Terms."></i>

                            </label>

                            <select class="form-control" id="ddlPaymentTerms" data-bind="options: paymentTermOptions, value: PaymentTerms, optionsText: 'PaymentTermsDesc', optionsValue: 'PaymentTermsDesc'"></select>

                        </div>

self.paymentTermOptions = ko.observableArray([]);

        listService.getPaymentTerms(function (payTerms) {

            self.paymentTermOptions(payTerms);

            var payT = org.single(payTerms, function (item) {

                return item.PaymentTermsCode = self.PaymentTermsCode;

            });

            if (payT) self.PaymentTerms(payT.PaymentTerms)

        });

On an single page application, the listbox sometimes not loaded and upon refreshing the screen it is loaded. It appears to be timing of service call vs binding.

Any help would be apprecated

Thanks

[Michael Best]

Your binding expects PaymentTerms to match the PaymentTermsDesc property of the list item because you have optionsValue: 'PaymentTermsDesc'. Perhaps you want that to be something else?

[Raj]

Thanks for your quick response.

It is the Edit view which does pass PaymentTerms with a valid value. 90% of the time it works well and fails sometime, refreshing the page resolves the issue.I doubt asynchronous call to service and binding has some conflict thinking of adding delay manually.

--
You received this message because you are subscribed to a topic in the Google Groups "KnockoutJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/knockoutjs/yqpNJJ-Qp1E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to knockoutjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[SLG]

I think the options binding only happens when once. If there is no value populated when the page loaded, you are not going to value populated. 

 I see this issue before. My solution is to add a flag to determine if the ajax call is completed. Only show the select when it is completed.

<div class="form-group" data-bind="if:isLoaded">

                            <label for="ddlPaymentTerms">

                                Payment Terms

                                <i class="fa fa-info-circle help" data-toggle="tooltip" data-placement="top" title="Payment Terms."></i>

                            </label>

                            <select class="form-control" id="ddlPaymentTerms" data-bind="options: paymentTermOptions, value: PaymentTerms, optionsText: 'PaymentTermsDesc', optionsValue: 'PaymentTermsDesc'"></select>

                        </div>

<div data-bind="ifnot:isLoaded">

some loading indicator like a spinner

</div>

self.isLoaded=ko.observable(false);

self.paymentTermOptions = ko.observableArray([]);

        listService.getPaymentTerms(function (payTerms) {

            self.paymentTermOptions(payTerms);

            var payT = org.single(payTerms, function (item) {

                return item.PaymentTermsCode = self.PaymentTermsCode;

            });

            if (payT) self.PaymentTerms(payT.PaymentTerms)

        }).then(function(){

self.isLoaded(true)

})

To unsubscribe from this group and all its topics, send an email to knockoutjs+...@googlegroups.com.