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个。

Knockout

1 个答案: