Knockout Modified
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<fieldset id="dedicated">
<legend>View model dedicated to modal</legend>
<input data-bind="value: obs"></input>
<button data-bind="click: launchModal">Summon a modal dialog</button>
<div id="dialog" title="Title" style="display:none">
<input data-bind="value: anotherObs">fhggjjfgfgfgh</input>
<br/>
<button data-bind="click: accept">Accept</button>
<button data-bind="click: cancel">Cancel</button>
</div>
</fieldset>
JavaScript
var vmDedicated = {
obs: ko.observable("Hello1"),
launchModal: function () {
$('#dialog').dialog('open')
var obs = this.obs;
var dialogViewModel = {
anotherObs: ko.observable(obs()),
accept: function () {
obs(dialogViewModel.anotherObs())
$('#dialog').dialog('close')
},
cancel: function () {
$('#dialog').dialog('close')
}
}
ko.applyBindings(dialogViewModel, $('#dialog')[0])
}
}
$("#dialog").dialog({
autoOpen: false
});
$("#dialog-decorated").dialog({
autoOpen: false
});
ko.applyBindings(vmDedicated, $("#dedicated")[0])
ko.applyBindings(vmDecorated, $("#decorated")[0])