Below is my HTML code to open oj-dialog
<div id="dialogWrapper">
<div style="display:none" id="modalDialog1" title="Modal Dialog" data-bind="ojComponent:{component: 'ojDialog',
initialVisibility: 'hide',
open: dialogOpen,
close: dialogClose,
rootAttributes: {
class: 'animate'
}}">
<div class="oj-dialog-body">
The dialog window can be moved, resized and closed with the 'x' icon.
Arbitrary content can be added to the the oj-dialog-body and oj-dialog-footer sections.
</div>
<div class="oj-dialog-footer">
<button id="okButton" data-bind="click: closeDialog,
ojComponent: {component: 'ojButton',
label: 'OK'}"> </button>
</div>
</div>
<button id="buttonOpener" data-bind="click: openDialog,
ojComponent: {component: 'ojButton',
label: 'Open Modal Dialog'}"></button>
</div>
Below is my corresponding js code :
define([‘require’, ‘exports’, ‘knockout’, ‘ojs/ojbootstrap’, ‘ojs/ojknockout’, ‘ojs/ojbutton’, ‘ojs/ojdialog’],
function(ko, oj, $) {
‘use strict’;
var ViewModel = function() {
var self = this;
self.openDialog = function() {
$("#modalDialog1").ojDialog("open");
};
self.closeDialog = function(data, event) {
// attempt fadeOut with jQuery
$(event.target)
.closest(".oj-dialog.animate")
.fadeOut(function() {
console.log("faded out", this);
$("#modalDialog1").ojDialog("close");
});
};
self.dialogOpen = function(event, ui) {
$(event.target)
.closest(".oj-dialog.animate")
.addClass("fully-opaque");
};
self.dialogClose = function(event, ui) {
$(event.target)
.closest(".oj-dialog.animate")
.removeClass("fully-opaque");
};
};
ko.applyBindings(new ViewModel());
});
When I run this code I am getting "ko.applybindings is not a function" error. Can Anyone see where its going wrong.