0
モーダルダイアログにノックストラップを使用しています。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);
は、モーダルポップアップを表示する必要があります。