ASP.NET MVC Knockout 按鈕單擊調用 POST API

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

我不明白為什么？

after that I need to do an ajax call to my controller, and the end to call some api in that controller, and return the information if the api call was successfull or not.

Answer 1

我將假設您正在嘗試在給定的表格中顯示信息

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

我還將假設在表或表體級別有一個ko:foreach 。 如果是這種情況，則 sendDataToApi 與父 vm object 相關聯，而不是與當前用於創建表行的 object 相關聯。

如果是這種情況，那么您需要使用$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>

編輯

您只需要在接收 function 中添加一個參數，因為淘汰賽通過當前的 object。

 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>