Get API 调用格式不正确 JS 淘汰 asp.net

Question

我是编写网络应用程序的新手，这是第一次使用 Knockout

我正在尝试为 Get 调用我的 API 构建一个 URL，我知道如果我使用静态 URL，它是有效的。我通过点击Details 链接触发Get 调用。

我的目标是传递当前项目并使用它的indx 属性。 但是我得到以下

当我点击索引为 2 的项目时，我尝试获取/api/ReqsTest/2 的 URL

我的标记是

<small><a href="#" data-bind="click: $parent.getReqDetail">Details</a></small>

我的淘汰功能是

 // Details
self.detail = ko.observable();

self.getReqDetail = function (item) {

    var url = reqsUri + item.indx;
    alert("Get Url :" + url);// just for debug
    ajaxHelper(url, 'GET').done(function (data) {
        self.detail(data);
    }


    );

能否解释一下我做错了什么以及为什么

我的完整 ViewModel 代码是

    function ReqsTest(rt) {
    rt = rt || {};
    var self = this;
    self.id = ko.observable(rt.ID || 0);
    self.requisition = ko.observable(rt.Requisition || "");
    self.reqnStatus = ko.observable(rt.ReqnStatus || "");
    self.dateReqnRaised = ko.observable(rt.DateReqnRaised|| null);
    self.reqnValue = ko.observable(rt.ReqnValue || null);
    self.approvedValue = ko.observable(rt.ApprovedValue || null);
    self.originator = ko.observable(rt.Originator || "");
    self.origName = ko.observable(rt.OrigName || "");
    self.origEmail = ko.observable(rt.OrigEmail || "");
    self.line = ko.observable(rt.Line || 0.00);
    self.indx = ko.observable(rt.INDX || 0);
    self.dateReqnRaisedL = ko.observable(rt.DateReqnRaisedL || null);
    self.reqStatus = ko.observable(rt.ReqStatus || "");
    //self.reqBackground = ko.observable(rt.ReqBackground || "");


    //Computed observables
    self.reqBackground = ko.computed(function () {
        // get variable 
        var status = self.reqStatus();
        if (status == "A") { return "card-heading bg-success text-white"; }
        else if (status == "D") { return "card heading bg-danger"; }
        else {
            return "card-heading bg-primary text-white";
        }
    })
    self.reqStatusLabel = ko.computed(function () {
        // get variable 
        var status = self.reqStatus();
        if (status == "A") { return "Approved"; }
        else if (status == "D") { return "Declined"; }
        else {
            return "Awaiting Approval";
        }
    })


}


function ReqsViewModel (){
    var self = this;
    self.Reqs = ko.observableArray([]);
    self.error = ko.observable();

    var reqsUri = '/api/ReqsTests/';

    function ajaxHelper(uri, method, data) {
        self.error(''); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }

    function getAllReqs() {
        ajaxHelper(reqsUri, 'GET').done(function (data) {
            // Build the ReqsTest objects
            var reqs = ko.utils.arrayMap(data, function (rt) {
                return new ReqsTest(rt);
            });
            self.Reqs(reqs);
        });

    }

     // Details
    self.detail = ko.observable();

    self.getReqDetail = function (item) {

        var url = reqsUri + item.indx;
        alert("Get Url :" + url);// just for debug
        ajaxHelper(url, 'GET').done(function (data) {
            self.detail(data);
        }


        );
    }

    //Approval function
    self.Approval = function (item) {

        item.reqStatus("A");
        alert("Approval " + item.reqStatus);
    }


    // Load the reqs - Take this out if you don't want it
    getAllReqs();
}

ko.applyBindings(new ReqsViewModel());

我的满分是

    @section scripts {
    @Scripts.Render("~/bundles/app")
}

<div class="page-header">
    <h1>Chamberlin Requistions</h1>
</div>

<div class="row">

    <div class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">Requistions</h2>
            </div>
            <div class="panel-body panel-info ">
                <ul class="list-unstyled" data-bind="foreach: Reqs">
                    <li>

                        <div class="card">
                            <div data-bind="css: reqBackground">
                                <strong>
                                    <span data-bind="text: requisition"></span>
                                    : <span data-bind="text: line"></span> <br />
                                    Status: <span data-bind="text: reqStatusLabel"></span>
                                    :Index: <span data-bind="text: indx"></span>


                                </strong>
                            </div>
                            <div class="card-body">
                                <p>
                                    <span data-bind="text: dateReqnRaisedL"></span>
                                    : <span data-bind="text: origName"></span>
                                    :£ <span data-bind="text: reqnValue"></span>


                                    <small><a href="#" data-bind="click: $parent.getReqDetail">Details</a></small>
                                </p>
                            </div>
                            <div class="card-footer">
                                @* Buttons to go in here *@
                                <div class="btn-group btn-group-xs">
                                    <button type="button" class="btn btn-primary" data-bind="click: $parent.Aprroval">Approve</button>
                                    <button type="button" class="btn btn-primary">Decline</button>
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Unknown</button>
                                </div>

                            </div>
                        </div>

                    </li>
                    <p></p>
                </ul>
            </div>
        </div>
        <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
    </div>

    <!-- ko if:detail() -->
    <div class="col-xs-4">
        <div class="card bg-info">
            <div class="card-header">
                <h2 class="panel-title">Detail</h2>
            </div>
            <div class="card-body">
                <table class="table">
                    <tr><td>Requistion</td><td data-bind="text: detail().Requisition"></td></tr>
                    <tr><td>Line</td><td data-bind="text: detail().Line"></td></tr>
                    <tr><td>Date Raised</td><td data-bind="text: detail().DateReqnRaisedL"></td></tr>
                    <tr><td>Requested Value</td><td data-bind="text: detail().ReqnValue"></td></tr>
                    <tr><td>Requestor Email</td><td data-bind="text: detail().OrigEmail"></td></tr>
                </table>
            </div>
        </div>
    </div>

    <!-- /ko -->
    @*<div class="col-xs-4">
             TODO: Add new book
        </div>*@
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Answer 1

那是我忘记了 Knockout 的基本内容 以后记得加上 ()

所以

var url = reqsUri + item.indx;

变成

var url = reqsUri + item.indx();

修正函数

// Details
self.detail = ko.observable();

self.getReqDetail = function (item) {

    var url = reqsUri + item.indx();
    alert("Get Url :" + url);// just for debug
    ajaxHelper(url, 'GET').done(function (data) {
        self.detail(data);
    }


    );