Add dynamic rows to list using KnockoutJS

Question

I have added a custom step in checkout where we list all the uploaded prescription by the customers and they can upload new file also. So once the customer upload the file, on "Next step" we upload that file using ajax. Till now everything is working fine.

But now, I want to add newly uploaded prescription in above list. Below is my upload code:

fileUploader.fileupload('send', data).success(function (result) {
            tmpInput.remove();
            result = JSON.parse(result);
            if ('error' in result && result['error'] != 0) {
                messageList.addErrorMessage({
                    message: $t('Something went wrong. Please contact Support team.')
                });
            } else {
                self.prescriptions.push(result);
                ko.cleanNode($('#prescription_list')[0]);
                ko.applyBindings(self, $('#prescription_list')[0]);
                messageList.addSuccessMessage({
                    message: $t('Prescription have been uploaded successfully.')
                });
            }
        }).error(function (e, data) {
            if (e.status !== 200) {
                messageList.addErrorMessage({
                    message: $t('Something went wrong. Please contact Support team.')
                });
            }
        }).done(function () {
            stepNavigator.next();
        });

Main Issue: Once the file is uploaded successfully and applyBinding executes, it add additional rows in the list. (For eg: in place of 5 rows in list it shows 20 rows).

Answer 1

You should not run applyBinding or cleanNode when writing KO within Magento 2. They have some dark magic that runs this somewhere in the core.