Question

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

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

我要从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 Array

我的视图模型代码为

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>

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

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函数。

class A{
    public static void main(String args[]){
        System.out.print("Hello")
    }
}

然后创建一个视图模型以绑定到页面。

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

并将viewmodel绑定到页面...

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

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

我手动输入了此代码，因此可能存在一些语法错误

KnockoutJS-具有SQL Server数据的Observable对象的Observable数组

1 个答案: