我正在使用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);
应显示模态弹出窗口。
答案 0 :(得分:1)
如果没有将其复制到JSFiddle或类似的东西中,很难确定,但我要尝试的第一件事是更改按钮上的绑定:
data-bind="event: {click: showModal}"
要:
data-bind="click: showModal"
在相关的说明中,如果您将点击绑定到表格中的大量行,则值得查看 - https://github.com/rniemeyer/knockout-delegatedEvents。它是一个委托的事件处理程序,所以如果你有100行,它只会绑定1个事件而不是100个事件,每行1个。