knockout.js "with" binding and dynamic html

Question

I want to have a modal dialog to appear with some content and buttons inside it. The dialog should be bound to some observable property or not, the dialog also must have close buttons, one inside its body, another on the top right corner. My main aim is to close this modal form with these buttons, but "Cancel" button inside dialog's body doesn't work as expected.

1) First approach:

In this example dialog is created with static dialog, on "Open dialog" button click it shows up, it gets closed if clicked on top right X link, but it doesn't close on "Close" button click, however I set my observable to null. I was pretty much sure about this approach, as it was described in this brilliant explanation.

Excerpt from my code:

HTML:
<button data-bind="click: openDialog">Open dialog</button>
<div data-bind="with: dialogOpener">
    <div data-bind="dialog: { data: $data, options: { close: Close } }">
        <button data-bind="click: Save">Save</button>
        <button data-bind="click: Close">Cancel</button>
   </div>
</div>

JS:
self.dialogOpener = ko.observable();

self.openDialog = function () {             
    var data = {
        Save: function() {
                  alert('Saved');
              },
        Close: function() {
                  alert('Closed');
                  self.dialogOpener(null);
               }
        }

    self.dialogOpener(data);
}

Fully working example: http://jsfiddle.net/cQLbX/

2) Second approach shows how my dialog html is dynamically created and it has the contents and the same results as in the first example.

Excerpt from my code:

HTML:
<button data-bind="click: openDialog">Open dialog</button>

JS:
self.dialogOpener = ko.observable();

self.openDialog = function () {
    var element = "";
    element += '<div data-bind="with: $data">';
    element += '<div data-bind="dialog: { data: $data, options: { close: Close } }">';
    element += '<button data-bind="click: Save">Save</button>';
    element += '<button data-bind="click: Close">Cancel</button>';
    element += '</div>';
    element += '</div>';

    var data = {
        Save: function() {
            alert('Saved');
        },
        Close: function() {
            alert('Closed');
            self.dialogOpener(null);
        }
    }

    self.dialogOpener(data);

    ko.applyBindings(data, $(element)[0]);
}

Fully working example: http://jsfiddle.net/6T3Ra/

My question is:

On both examples "Cancel" button inside body doesn't work, the dialog doesn't close, what am I doing wrong and how to solve this?

Thanks a lot!

score 1 · Answer 1 · answered Jun 02 '13 at 15:53

I don't know if you use any plugins and what not, but looking at your js fiddle example no2 with the help of a great thing called debugger is that you aren't explicitly telling the element to hide. A solution to this could be the following:

//If you look at E, E would be the ViewModel and X would be the jQuery Event Click
Close: function(e, x) {
   //from the event we have currentTarget which is the button that was pressed.
   //parentElement would be the first element, and the next parentElement was 
   //the modal in your demo. When we call hide() it hides the modal from 
   //which the button was pressed.
   $(x.currentTarget.parentElement.parentElement).hide();
   //left these as is from your example
   alert('Closed');
   self.dialogOpener(null);
}

This works, but I think that closing it like you suggested would spoil View Model approach as we drill the DOM and close it manually. Thank you very much anyway! — desperate man, Jun 02 '13 at 16:32
@summerbabe what you should have taken from this answer is that you are missing the element reference in your code, my answer was meant as a point in the right direction without giving you a perfect answer as it serves better for learning. — Joakim, Jun 02 '13 at 17:04

score 1 · Accepted Answer · answered Jun 02 '13 at 16:37

made a bunch of changes to your fiddle, maybe not how you want to do it, but the cancel and x buttons both do the same thing now

http://jsfiddle.net/cQLbX/3/

<div data-bind="dialog: dialogOpener, dialogOptions: { autoOpen: false, close: Close, buttons: { 'Save': Save, 'Cancel': Close } }">
        <div data-bind='with: dialogContent'>
            <div data-bind="text: Test"></div>
        </div>
    </div>

i usually structure my dialogs like this, and i've had success with them.

knockout.js "with" binding and dynamic html

2 Answers2