KnockoutJS - 可观察对象的可观察数组，包含来自 SQL 服务器的数据

Question

我正在为一个网络应用做一个简单的概念验证

我想知道如何实现上述目标。

我正在从 SQL Server 的 API 中检索一类项目。类的简单结构是

 public partial class ReqsTest
{
    public string ID { get; set; }
    public string Requisition { get; set; }
    public Nullable<System.DateTime> DateReqnRaised { get; set; }
    public Nullable<decimal> ReqnValue { get; set; }
    public Nullable<decimal> ApprovedValue { get; set; }
    public decimal Line { get; set; }
    public long INDX { get; set; }
    public string ReqStatus { get; set; }
    public string ReqBackground { get; set; }
}

我正在使用从服务器返回的数据填充一个 Knockout Observable 数组

我的视图模型代码是

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) {
        self.reqs(data);
    });
}

问题当然是我现在知道数组中的底层对象属性是不可观察的，就像这个问题here

我正在尝试了解如何使用此代码 here 来弥补差距，但我完全理解这些调用

我相信我需要这种函数来创建具有 Observable 属性的对象，以便以后更新，例如这样的

function Item(ID, Requistion,DateReqnRaised,ReqnValue,ApprovedValue,Line,INDX,ReqStatus,ReqBackground) {
    //Not editable properties
    this.ID = ID; 
    this.Requistion = Requistion;//Not editable
    this.DateReqnRaised = DateReqnRaised;//Not editable
    this.ReqnValue = ReqnValue; //Not editable
    this.Line = Line;
    this.INDX = INDX;



    //editable later properties
    this.ApprovedValue = ko.observable(ApprovedValue); 
    this.ReqStatus = ko.observable(ReqStatus);
    this.ReqBackground = ko.observable(ReqBackground);

}

但这可能还不完全正确，我相信我需要将这里的代码更改为但我不确定如何使用它调用 item 函数。感觉就像我需要循环遍历 data 中的每个返回来调用函数项以将其添加到可观察数组中，但我还不确定。

function getAllReqs() {
    ajaxHelper(reqsUri, 'GET').done(function (data) {
        self.reqs(data);
    });
}

谁能帮忙

****更新的代码****

Index.cshtml 代码

 <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  >
                            <strong>
                                <span data-bind="text: reqs().Requisition"></span>
                                : <span data-bind="text: reqs().Line"></span>
                            </strong>
                        </div>

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

根据要求提供视图模型的更新代码

function ReqsTest(rt) {
rt = rt || {};
var self = this;
self.id = ko.observable(rt.ID || 0);
self.requisition = ko.observable(rt.Requisition || "");
self.dateReqnRaised = ko.observable(rt.DateReqnRaised || null);
self.reqnValue = ko.observable(rt.ReqnValue || null);
self.approvedValue = ko.observable(rt.ApprovedValue || null);
self.line = ko.observable(rt.Line || 0.00);
self.indx = ko.observable(rt.INDX || 0);
self.reqStatus = ko.observable(rt.ReqStatus || "");
self.reqBackground = ko.observable(rt.ReqBackground || ""); }

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);
    });
}

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

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

self.getReqDetail = function (item) {
    ajaxHelper(reqsUri + item.INDX, 'GET').done(function (data) {
        self.detail(data);
    });
}     
ko.applyBindings(new ReqsViewModel());

谢谢

Answer 1

首先为您的 ReqsTest 类创建一个匹配的 JavaScript 函数。

function ReqsTest(rt) {
    rt = rt || {};
    var self = this;
    self.id = ko.observable(rt.ID || 0);
    self.requisition = ko.observable(rt.Requisition  || "");
    self.dateReqnRaised = ko.observable(rt.DateReqnRaised || null);
    self.reqnValue  = ko.observable(rt.ReqnValue  || null);
    self.approvedValue = ko.observable(rt.ApprovedValue || null);
    self.line = ko.observable(rt.Line || 0.00);
    self.indx = ko.observable(rt.INDX || 0);
    self.reqStatus = ko.observable(rt.ReqStatus || "");
    self.reqBackground = ko.observable(rt.ReqBackground  || "");
}

然后制作一个视图模型来绑定到页面。

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);
        });
    }

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

并将视图模型绑定到页面...

ko.applyBindings(new ReqsViewModel());

您现在有了一个具有可观察属性的可观察对象数组。

我手动输入了这段代码，所以可能有一些语法错误