While binding the data to popover, the 2nd click onwards it shows the error - You cannot apply bindings multiple times to the same element. How do you fix it?

See more:

Binding

Knockout.js

POP3

While binding the data to popover, the 2nd click onwards it shows the error - You cannot apply bindings multiple times to the same element. How do you fix it?

Apologies, here is a sample code.

<pre lang="HTML">


 <a   id="testlnk" "popover:'settingsPopover'">
Link Test
</a>
      
//Template For Pop Up  

<script type="text/html" id="settingsPopover">

    <table >
    <tbody data-bind="foreach:EmpList">
    <tr >    
    <td >   
 <div>   
<input type="radio" style="padding:0px !important;vertical-align:top"/>
  <span  class="labelPrimary" style="vertical-align:top;padding:0px !important" data-bind="text:name"  >
     
    </span>

      </div>
  </td>  
    </tr >
     </tbody>
     </table>
         <table >
     <tbody>
   <tr  >
    <td > 
       <div >
    <button id="btnOk" style="width: 100%"
                                >
                               OK
                            </button>
                            </div></td>
    </tr>
    </tbody>
    </table>
 </script>     

The Knockout Binding is as follows -

<pre lang="Javascript">
ko.bindingHandlers.popover = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                var tmplId = ko.utils.unwrapObservable(valueAccessor());
                var tmplHtml = $('#' + tmplId).html();
               
                var domId = "Testing";
                var tmplDom = $('<div/>', {

                    "id": domId,
                    "data-bind": "withProperties: { EmpList: viewModel.EmployeeList  }"
                }).html(tmplHtml);


                var settingsup = {
                    trigger: 'manual',
                    closeable: true,                
                    title: " ",
                    dismissible: true
                };
                var contup = $("#settingsPopover").html();
                var applied = false;
               
                var conSetup = { content: tmplDom[0].outerHTML, width: 500, placement: 'auto', constrains: 'vertical', style: '' };

                $(element).webuiPopover($.extend({}, settingsup, conSetup));

                    $(element).bind('click', function () {
           
             

                $(element).webuiPopover('show');
            
                if ($('#' + domId).is(':visible')) {
                   
                    ko.applyBindings(viewModel, $('#' + domId)[0]);
                

               }
            }
        });

    }
};

ko.bindingHandlers.withProperties = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // Make a modified binding context, with a extra properties, and apply it to descendant elements
        var newProperties = valueAccessor(),
            innerBindingContext = bindingContext.extend(newProperties);
        ko.applyBindingsToDescendants(innerBindingContext, element);

        // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice
        return { controlsDescendantBindings: true };
    }
};

The issue is the employee list is updated based on some other event on the page.This new employee data is to be displayed on the pop up in a radio button list.

I'm using a pop-up plugin (https://github.com/sandywalker/webui-popover).