Knockout.js modal dialog - Pass viewmodel elements to popup

Question

I am opening a modal dialog on click of button.

 <input data-bind="click: review" class="button" type="button" value="review" />

On button click:

$('#divModal').dialog("open");

Below is the code which I have in my document.ready to call a modal dialog.

$('#divModal').dialog({
            autoOpen: false,
            modal: true,
            width: 400,
            height: 700,
            buttons: {
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });

In my apply bindings, I have all the values of my observable arrays. I am binding these values in my form. I want to pass same values to my modal popup.

I tried the below code in html:

<div id="divModal">
            <section data-bind="visible: myCondition() === 'Readers'">
                <div>Readers List Goes here</div>
            </section>
             <section data-bind="visible: myCondition() === 'Writers'">
                <div>Writers List Goes Here</div>
            </section>
             <section data-bind="visible: myCondition() === 'Others'">
                <div>Others List goes here</div>
            </section>

</div>

myCondition is an observable array.

I am able to display its value in the html. "Apply Bindigs" takes care of this.

I am unable to display its value in the modal dialog.

I have a bunch of other elements which I want to pass to this modal dialog.

How do I call a function when the modal dialog opens - so that I can pass all my values to this function?

Could anyone help me here?

Thanks!

DOM manipulations should be done in a binding handler. See http://stackoverflow.com/a/22707080/392102 for a Bootstrap modal binding handler. — Roy J, Sep 07 '16 at 12:27
I dont need to update/edit. I just want to dispay a summary of my entire page in a popup. Something like Preview. Opening the popup should display some data, from same html. — user2598808, Sep 12 '16 at 03:35

score 0 · Accepted Answer · edited May 23 '17 at 10:29

In Knockout, your ViewModel should not know about the View. The ViewModel is purely data structures representing the state of your application, and Knockout ensures that the View is in sync with it. The notion of "passing values to my modal popup" is fundamentally misguided. Your modal's state - any data it displays, and its being open/closed - should be represented in your model. Opening the dialog is a matter of setting an observable. A binding handler (which is an extension of Knockout, and not part of your ViewModel) will handle the associated DOM manipulation.

With that in mind, your problem reduces to "How do I pass data to the portion of my ViewModel that the modal reflects?" That's impossible to answer without seeing how you've set up your ViewModel. Maybe you've made separate ViewModels and need communication like postbox. Maybe your modal is a component and you just need to set its params.

Roy J - Thank you for the detailed explanation. I am in a learning phase and this really helps. I have used templating in KO.JS and modified my view model. — user2598808, Sep 15 '16 at 10:13

Knockout.js modal dialog - Pass viewmodel elements to popup

1 Answers1