knockout.js - deferred databinding for modal?

Question

I am using knockout.js to display a list of employees. I have a single hidden modal markup on the page. When the "details" button for a single employees is clicked, I want to data-bind that employee to the modal popup. I am using the ko.applyBindings(employee, element) but the problem is when the page loads, it is expecting the modal to start off as bound to something. So I'm wondering, is there a trick/strategy to do a late/deferred databinding? I looked into virtual bindings but the documentation was not helpful enough. Thanks!

Accepted Answer

I would create another observable that wraps the employee.

```
this.detailedEmployee = ko.observable({}),

var self = this;
this.showDetails = function(employee){
    self.detailedEmployee(employee);
    $("#dialog").dialog("show"); //or however your dialog works
}
```

Attach the click to `showDetails`. Then you can just call `applyBindings` on page load.

knockout.js - deferred databinding for modal?

Solution

Problem