0
我正在使用Knockstrap進行我的模態對話框，請參閱https://faulknercs.github.io/Knockstrap/ 目前，我只想在單擊旋轉時顯示模式對話框？按鈕。 在服務器端，我有一個viewmodel類，裏面嵌入了viewmodel類的列表。所以我有一個親子關係。我使用Knockout ko.mapping.fromJS命令在客戶端創建類似的類。因此，PhotoSurveySectionViewModel對象包含一個AnswerViewModel對象列表，您可以在下面的標記中看到我有一個使用foreach遍歷所有AnswerViewModel對象的表。這包含每行的照片，後面跟着一個值爲「旋轉」的按鈕。點擊該按鈕後，我需要一個模式彈出窗口來顯示該照片。Knockout中的模式對話框
@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);
應顯示模式彈出。