ASP.. NET MVC Knockout按钮单击调用POST API &g

Question

我有一个表(列表)在我的前端html，每一行，我有一个按钮:

...
<td>
<button data-bind="click: sendDataToApi">Test button</button>
</td>
...

在。js文件中，我有这样的内容:

define(['viewmodels/shell', 'durandal/services/logger', 'plugins/dialog', 'viewmodels/shell', 'toastr', 'knockout', 'kovalidationconfig', 'plugins/router', 'typeahead.bundle'],
function (shell, logger, dialog, shell, toastr, ko, kvc, router, typeahead) {
var vm = {
activate: activate,
shell: shell,
data: ko.observableArray([]),
close: function () {
$(window).off('popstate', vm.goBack);
$(window).off('resize', adjustModalPosition);
dialog.close(vm, 'cancel');
},
goBack: function () {
$(window).off('popstate', vm.goBack);
$(window).off('resize', adjustModalPosition);
dialog.close(vm, 'back');
},
editPreregisteredChildren: function () {
router.navigate("#/function/" + this.id);
},

currentPage: ko.observable(1),
itemsPerPage: ko.observable(10),
hasNextPage: ko.observable(false),
previousPage: previousPage,
nextPage: nextPage,
sendDataToApi: function () {console.log("sdsdsds")},
searchCriteria: ko.observable(''),
applySearch: applySearch,
locations: ko.observableArray([]),
locationId: ko.observable(),
LocationName: ko.observable(),
exportHref: ko.observable("/spa/ExportSchedulings"),
bindingComplete: function (view) {
bindFindLocationEvent(view);
}
};
function sendDataToApi() {
console.log("hello.")
};
});

所以，首先，我想让console.log("something")工作。

现在我得到错误在我的控制台在chrome:

Uncaught ReferenceError: Unable to process binding "click: function(){return sendDataToApi }"
Message: sendDataToApi is not defined

我不明白为什么?

之后，我需要做一个ajax调用到我的控制器，并结束调用一些api在该控制器，并返回信息，如果api调用成功与否。

Answer 1

我将假设您正在尝试在给定

的表中显示信息

<td>
<button data-bind="click: sendDataToApi">Test button</button>
</td>

我还将假设在表或表体级别存在一个ko:foreach。如果是这种情况，则sendDataToApi与父vm对象相关联，而不是当前用于创建表行的对象。

如果是这种情况，那么您需要使用$parent.sendDataToApi或$root.sendDataToApi

<td>
<button data-bind="click: $parent.sendDataToApi">Test button</button>
</td>

或

<td>
<button data-bind="click: $root.sendDataToApi">Test button</button>
</td>

编辑

您只需要向接收函数添加一个参数，因为knockout传递当前对象。

var serverData = [{
id: 1,
name: 'Test 1'
},
{
id: 2,
name: 'Test 2'
},
{
id: 3,
name: 'Test 3'
},
];
function ViewModel() {
var self = this;
self.data = ko.observableArray([]);
self.checkServer = function checkServer(row) {
console.log(ko.toJS(row));
}

self.fillTable = function fillTable() {
var mappedData = serverData.map(r => new RowViewModel(r));
self.data(mappedData);
}


}
function RowViewModel(data) {
var self = this;
self.id = ko.observable(data.id || 0);
self.name = ko.observable(data.name || '');

}
ko.applyBindings(new ViewModel());

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button class="button" data-bind="click: fillTable">Fill Table</button>
<table class="table">
<tbody data-bind="foreach: data">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td>
<button data-bind="click: $parent.checkServer">Check Server</button>
</td>
</tr>
</tbody>
</table>