Knockout を使用して WebApi から生成されたテーブルからモーダル フォームを開くことに頭を悩ませています。実際には、より正確には、モーダルをクリックされた行にバインドするのに苦労しています。
これが私のビューモデルです。
function task(id, name, duedate, overdue, phase, project, description, groups) {
var self = this;
self.name = ko.observable(name);
self.duedate = ko.observable(duedate);
self.overdue = ko.observable(overdue);
self.phase = ko.observable(phase);
self.project = ko.observable(project);
self.description = ko.observable(description);
self.groups = groups;
self.id = ko.observable(id);
}
function bTask() {
var self = this;
var parts = document.location.href.split("/");
var id = parts[parts.length - 1];
self.atasks = ko.observableArray([]);
$.getJSON("/api/tasks/GetUserProjectTasks/" + id + "/Active/1/", function (data) {
$.each(data, function (key, val) {
self.atasks.push(new task(val.Id, val.Name, moment(val.DueDate).format('DD/MM/YYYY'), val.overdue, val.Phase, val.Project, val.Description, val.Groups));
});
});
}
$(document).ready(function () {
var aTask = new bTask();
ko.applyBindings(aTask, document.getElementById('activetasks'));
function onLoop() {
var self = aTask;
var parts = document.location.href.split("/");
var id = parts[parts.length - 1];
$.getJSON("/api/tasks/GetUserProjectTasks/" + id + "/Active/1/", function (data) {
self.atasks.removeAll();
$.each(data, function (key, val) {
self.atasks.push(new task(val.Id, val.Name, moment(val.DueDate).format('DD/MM/YYYY'), val.overdue, val.Phase, val.Project, val.Description, val.Groups));
});
});
}
setInterval(onLoop, 10000);
});
私の見解では、これをそのまま使用しています。
<div id="activetasks">
<!-- ko with: atasks()[0] -->
<h4 data-bind="text: project"></h4>
<!-- /ko -->
<table data-provides="rowlink"class="table table-striped table-bordered table-condensed">
<thead><tr><td colspan="4"><h6>Active Tasks</h6></td></tr>
<tr><td style="width:15%">Due Date</td><td style="width:30%">Task Name</td> <td style="width:35%">Description</td><td style="width:20%">Assigned To</td></tr>
</thead>
<tbody data-bind="foreach: atasks">
<tr class="rowlink" data-toggle="modal" data-target="#atModal" data-id="value:id" ><td data-bind="text: duedate"></td>
<td data-bind="text: name"></td>
<td data-bind="text: description"></td>
<td>
<div data-bind="foreach: groups">
<div data-bind="text: GroupName"></div>
<br/>
</div> </td></tr></tbody></table>
<!-- Modal for Active Tasks -->
<div id="atModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="atModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="atModalLabel" data-bind="text: name"></h4>
<span id="tid"></span>
</div>
<div class="modal-body">
<p>Some Actions for with the task</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
これは私のような初心者によくある問題だと確信しています-では、モーダルにクリックされた行の詳細を表示するにはどうすればよいですか?
助けていただければ幸いです。
ジョン