Question

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

我很确定这对像我这样的新手来说是一个常见的问题 - 所以如何让我的模态显示点击行的详细信息？

任何帮助表示感谢。

约翰

Answer 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

如何使用带有Knockout的Bootstrap Modal Rowlink绑定到细节 - MVC 4

1 个答案: