Binding Ajax Response Issue "You cannot apply bindings multiple times to the same element." in knockoutJs Magento2.4.3

Question

I am calling ajax inside knockoutJs and want to binding data inside html file on checkout page. How could i achieve this. Please help me.

define(
[
    'jquery',
    'ko',
    'uiComponent'
],
function($, ko, Component) {
    'use strict';

    $(document).on('input', 'input[name="postcode"]', function () {
        var ViewModel = function () {
            var self = this;
            self.data = ko.observableArray();
        };
        var viewModel = new ViewModel();
        ko.applyBindings(viewModel);
                var postcode = $("input[name='postcode']").val();
                var url = ;
                $.ajax({
                    showLoader: true,
                    url: url,
                    data: {postcode: postcode},
                    type: "POST",
                    dataType: 'json'
                }).done(function (content) {
                    viewModel.data(content);
                });
            });
        });

After that i am getting this error.

Please correct my code. Thanks in advance.

Answer 1

By calling ko.applyBindings(viewModel); you are enabling knockout and binding to the root element the viewModel, right?

You can not apply bindings multiple times on the same element, so if this line gets called a 2nd time on the same root element, it will faiil.

You either want to set explicit html node, like ko.applyBindings(vm, elem) or you might want to check out ko.cleanNode(elem); so that you make sure that previous bindings are cleaned first and then you re-bind to the same element normally