KnockoutJS - 具有来自 SQL 服务器数据的 Observable 对象数组

Question

我正在为网络应用程序进行简单的概念验证

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

我在 SQL 服务器的 API 中检索了 class 个项目。 Class的简单结构是

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

我正在用来自服务器return的数据填充一个 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);

}

但这可能还不太正确，我相信我需要将此处的代码更改为，但我不确定如何使用它调用项目函数。感觉我需要遍历 data 中的每个 return 来调用函数项以将其添加到可观察数组中，但我还不确定。

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 class 创建一个匹配的 JavaScript 函数 class。

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

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

这段代码是我手写的，所以可能会有一些语法错误

KnockoutJS - 具有来自 SQL 服务器数据的 Observable 对象数组

KnockoutJS - Observable Array of Observable objects with Data from SQL server

javascript

asp.net

knockout.js