淘汰赛中的模态对话框

Question

我正在为我的模态对话框使用 Knockstrap，请参阅 https://faulknercs.github.io/Knockstrap/ 目前我只想在单击“旋转”时显示模态对话框？按钮。 在服务器端，我有一个 viewmodel 类，其中嵌入了 viewmodel 类的列表。所以我有亲子关系。我使用 Knockout ko.mapping.fromJS 命令在客户端创建类似的类。所以 PhotoSurveySectionViewModel 对象包含一个 AnswerViewModel 对象列表，您可以在下面的标记中看到我有一个使用 foreach 遍历所有 AnswerViewModel 对象的表。这包含每行的一张照片，后跟一个值为 Rotate 的按钮。单击该按钮时，我想要一个模式弹出窗口来显示该照片。

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

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

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

    <script type="text/html" id="secondModalTemplate">
        <p data-bind="text: text"></p>
        <p data-bind="text: simpleLabel"></p>
    </script>
}

模板暂时显示虚拟文本。 问题是如何设置将显示模式弹出窗口的 modalVisible 属性？ 我已将 modalVisible 属性放在父对象中，并在单击按钮时将副本发送到子对象以将其设置在那里。但是，尽管 modalVisible 属性确实在代码运行时被设置，但它与使模态可见所需的 modalVisible 不同。如何解决此问题以使其正常工作？

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)

所以这里当按钮被点击的那一行；

parent.photoSurveySectionViewModel.modalVisible(true);

应该显示模态弹出窗口。

Answer 1

如果不将其复制到 JSFiddle 或类似的东西中，很难确定，但我会尝试的第一件事是更改按钮上的绑定：

data-bind="event: {click: showModal}"

收件人：

data-bind="click: showModal"

在相关说明中，如果您将点击绑定到表中的大量行，那么值得一看 - https://github.com/rniemeyer/knockout-delegatedEvents。它是一个委托事件处理程序，因此如果您有 100 行，它只会在父级上绑定 1 个事件，而不是 100 个事件，每行 1 个。