我正在使用MVC,knockoutJS,Web API,Bootstrap等创建项目,正在使用的数据库是MSSQL Server 2012.它们都运行良好,控制器已正确创建CRUD操作。来自DB的数据显示在UI的网格表中,并且每行都是可点击的,并打开一个模态,其中显示有关该精确元素的数据。我遇到的问题是无法将行的某个值(在本例中为ID)传递给ViewModel作为在模态中获取单个结果的参数。我可以手动完成,并在ViewModel中放入一些值,数据将显示,但我无法从View中发送值。
以下是ViewModel的代码:
var regionsModel = {
regionId: ko.observable(),
companyId: ko.observable(),
name: ko.observable(),
companyName: ko.observable()
};
var regionsListModel = {
regions: ko.observable()
};
function getRegions() {
get(apiUrl + "Regions/GetRegions", {}, function (data) {
regionsListModel.regions(data);
});
}
function getRegion() {
get(apiUrl + "Regions/GetRegion", { aiId: regionsModel.regionId() }, function (data) {
regionsModel.regionId(data.RegionID);
regionsModel.companyName(data.CompanyName);
regionsModel.companyId(data.CompanyID);
regionsModel.name(data.Name);
});
}
function viewRegion() {
$("#ViewRegionModal").modal('show');
//regionsModel.regionId($('#ViewRegion').val());
getRegion();
return false;
}
以下是视图的代码:
<table class="table table-striped table-bordered responsive" id="dtable">
<thead>
<tr>
<th style="width: 20px;">ID</th>
<th>Region Name</th>
<th>Company Name</th>
</tr>
</thead>
<tbody data-bind="foreach: regionsListModel.regions">
<tr id="ViewRegion" data-toggle="modal" data-bind="click: viewRegion, value: RegionID">
<td data-bind="text: RegionID"></td>
<td data-bind="text: Name"></td>
<td data-bind="text: CompanyName"></td>
</tr>
</tbody>
</table>
aiId参数用于Controller中的GetRegion方法。
这是View的代码,其中显示了某个元素的数据:
<table class="table table-striped" data-bind="with: regionsModel">
<tbody>
<tr>
<th>Region ID:</th>
<td><span data-bind="text: regionsModel.regionId"></span></td>
</tr>
<tr>
<th>Region Name:</th>
<td><span data-bind="text: regionsModel.name"></span></td>
</tr>
<tr>
<th>Company Name:</th>
<td><span data-bind="text: regionsModel.companyName"></span></td>
</tr>
</tbody>
</table>
任何帮助将不胜感激!
答案 0 :(得分:2)
Knockout在调用事件处理程序时将当前绑定对象添加为第一个参数。 第二个参数是事件对象。
所以你唯一需要做的就是在viewRegion函数中添加一个参数。
function viewRegion(region) {
var regionID = region.RegionID;
// get data
return false;
}
我希望它有所帮助。