Knockout Component Example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<template id="people-picker-template">
  <div data-bind="attr:{'id':dialogId}, text:dialogId + ' content'">   
  </div>
  <button data-bind="click: open, text:'Open '+dialogId"></button>
</template>

<people-picker params="dialogId: 'dialog1'">
</people-picker>
<people-picker params="dialogId: 'dialog2'">
</people-picker>

JavaScript

ko.components.register('people-picker', {
    viewModel: DialogViewModel,
    template:{ element: 'people-picker-template', afterRender: initializeDialog}       
});

function DialogViewModel(params) {	
    var self = this; 
    self.dialogId = params.dialogId;
    self.dialogElement={};
    self.initializeDialog = function(){    
    	self.dialogElement = $("#"+self.dialogId).dialog({
        autoOpen  : false,
        modal     : true,
        title     : "A Dialog Box",
        buttons   : {                      
                      'Close' : function() {                 
                          $(this).dialog('close');
                      }
        					}
        });
    };
    self.open = function(){
    	self.dialogElement.dialog("open");
    }
    
    
}
 
ko.applyBindings();