0

我正在努力从使用 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>

我很确定这是像我这样的新手的常见问题 - 那么如何让我的模态显示单击的行的详细信息？

任何帮助表示赞赏。

约翰

4

1 回答 1

1

我发现最简单的方法是在视图模型中创建一个“selectedItem”属性。将这些成员添加到您的 bTask 视图模型中：

self.selectedItem = ko.observable();
self.selectItem = function(item) {
    self.selectedItem(item);
}

然后将点击处理程序添加到您的表格行，如下所示：

<tr data-bind="click: $parent.selectItem" (other attributes here)>

然后像这样向您的模态添加一个“with”绑定：

<div id="atModal" data-bind="with: selectedItem" (other attributes here)>

此外，请参阅此示例以使用 KO 和 Bootstrap 执行此操作（此示例也使用 TypeScript）：https ://github.com/smichelotti/TypeScript-presentation

于 2013-07-29T19:55:10.263 回答