Modal dialog in Knockout
<p>I am using Knockstrap for my Modal Dialog, see <a href="https://faulknercs.github.io/Knockstrap/" rel="nofollow noreferrer">https://faulknercs.github.io/Knockstrap/</a>
For the time being I just want to get the modal dialog to display when I click the Rotate? button.
On the server side I have a viewmodel class and embedded within is a list of viewmodel classes. So I have a parent - child relationship. I use the Knockout ko.mapping.fromJS command to create similar classes on the client side. So the PhotoSurveySectionViewModel object contains a list of AnswerViewModel objects, and you can see in the markup below that I have a table that uses foreach to iterate through all the AnswerViewModel objects. This contains a photo for each line followed by a button with a value Rotate. When that button is clicked, I want a modal popup to display that photo.</p>

<pre><code>@using Newtonsoft.Json
@model M.Survey.SurveyAdminApp.ViewModels.PhotoSurveySectionViewModel
@{
    ViewBag.Title = "Allocate Photos to Sections for " + ViewBag.AddressTitle;
    var data = JsonConvert.SerializeObject(Model);
}
&lt;div id="hiddenFields"
     data-msurvey-update-section-for-photo-url="@Url.Action("Update", "SurveyPhotos")"&gt;
&lt;/div&gt;
&lt;fieldset&gt;
    &lt;legend&gt;@ViewBag.Title&lt;/legend&gt;
    &lt;div style="width: 600px; text-align: right;"&gt;
        &lt;input type="button" value="Back" class="btn-mulalley navButton"
               data-msurvey-nav-url="@Url.Action("ViewSurveyAnswers", "PropertySurvey", new { propertySurveyId = ViewBag.PropertySurveyId })" /&gt;
    &lt;/div&gt;
    &lt;table&gt;
        &lt;thead&gt;
        &lt;tr&gt;
            &lt;th style="width: auto; text-align: center;"&gt;Photo&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
            &lt;th style="width: auto; text-align: center;"&gt;Original Section&lt;/th&gt;
            &lt;th style="width: auto; text-align: left;"&gt;New Section&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody data-bind="foreach: Answers"&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;img width="120" height="80" data-bind="attr:{src: Answer}" alt="Property Image"/&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;button type="button" class="btn-mulalley" data-bind="event: {click: showModal}"&gt;Rotate?&lt;/button&gt;
            &lt;/td&gt;
            &lt;td data-bind="text: SectionTitle" style="text-align: center;"&gt;&lt;/td&gt;
            &lt;td&gt;
                &lt;select data-bind="
                    options: $parent.SectionTitles,
                    optionsText: 'Title',
                    optionsValue: 'SurveySectionId',
                    value: SurveySectionId,
                    event:{ change: sectionChanged},
                    optionsCaption: '&lt;-- Select new section --&gt;'"&gt;&lt;/select&gt;
                &lt;span class="successHighlight" data-bind="text: successMessage"&gt;&lt;/span&gt;
                &lt;span class="errorHighlight" data-bind="text: errorMessage"&gt;&lt;/span&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;div style="width: 600px; text-align: right;"&gt;
        &lt;input type="button" value="Back" class="btn-mulalley navButton"
               data-msurvey-nav-url="@Url.Action("ViewSurveyAnswers", "PropertySurvey", new { propertySurveyId = ViewBag.PropertySurveyId })" /&gt;
    &lt;/div&gt;
&lt;/fieldset&gt;
&lt;!-- Modal --&gt;
&lt;!-- https://faulknercs.github.io/Knockstrap/--&gt;
&lt;div data-bind="modal: {
    visible: modalVisible,
    header: { data: { label: headerLabel } },
    body: { name: bodyTemplate, data: bodyData },
    footer: { data: { action: switchTemplates, closeLabel: 'Custom text', primaryLabel: 'Change body template' } }
}"&gt;&lt;/div&gt;

@section scripts
{
    @Scripts.Render("~/bundles/Knockout")
    @Scripts.Render("~/bundles/page/SurveyPhotos")
    &lt;script type="text/javascript"&gt;
        var photoSurveySectionViewModel = new PhotoSurveySectionViewModel(@Html.Raw(data));
        ko.applyBindings(photoSurveySectionViewModel);
    &lt;/script&gt;

    &lt;script type="text/html" id="firstModalTemplate"&gt;
        &lt;p data-bind="text: text"&gt;&lt;/p&gt;
        &lt;div class="form-group"&gt;
            &lt;label data-bind="text: label"&gt;&lt;/label&gt;
            &lt;input type="text" data-bind="value: label, valueUpdate: 'afterkeydown'" class="form-control" /&gt;
        &lt;/div&gt;
    &lt;/script&gt;

    &lt;script type="text/html" id="secondModalTemplate"&gt;
        &lt;p data-bind="text: text"&gt;&lt;/p&gt;
        &lt;p data-bind="text: simpleLabel"&gt;&lt;/p&gt;
    &lt;/script&gt;
}
</code></pre>

<p>The templates show dummy text for the time being.
The problem is how do I set the modalVisible property that will display the modal popup?
I have put the modalVisible property in the parent object and sent a copy to the child object to set it there when the button is clicked. But although the modalVisible property does get set when the code is run, it is not the same modalVisible required to make the modal visible. How do I fix this so that it works?</p>

<pre><code>var lineMapping = {
    'Answers': {
        create: function (options) {
            return new AnswerViewModel(options.data, self);
        }
    }
};

PhotoSurveySectionViewModel = function (data) {
    var self = this;
    self.modalVisible = ko.observable(false);
    ko.mapping.fromJS(data, lineMapping, self);
(more code not shown)

AnswerViewModel = function (data, parent) {
    var self = this;
    ko.mapping.fromJS(data, lineMapping, self);

    var firstTemplateData = {
        text: 'First template',
        label: ko.observable('Observable label')
    };

    var secondTemplateData = {
        text: 'Second template',
        simpleLabel: 'Simple text label'
    };

    self.showModal = function () {
        parent.photoSurveySectionViewModel.modalVisible(true);
    };

    self.headerLabel = ko.observable('Some header text');
    self.bodyTemplate = ko.observable('firstModalTemplate');
    self.bodyData = ko.computed(function () {
        return self.bodyTemplate() === 'firstModalTemplate' ? firstTemplateData : secondTemplateData;
    });
    (more code not shown)
</code></pre>

<p>So here when the button is clicked the line;</p>

<pre><code>parent.photoSurveySectionViewModel.modalVisible(true);
</code></pre>

<p>should display the modal popup.</p>