[英]KnockoutJS - Observable Array of Observable objects with Data from SQL server
我正在为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);
});
}
问题是,当然我现在知道数组中的基础对象的属性没有观察到在这个问题在这里
我正在尝试了解如何在此处使用此代码来弥合差距,但我确实完全理解调用
我相信我将需要这种函数来创建具有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());
谢谢
首先为您的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 || "");
}
然后制作一个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();
}
并将viewmodel绑定到页面...
ko.applyBindings(new ReqsViewModel());
现在,您有了具有可观察属性的可观察对象数组。
我手动输入了此代码,因此可能存在一些语法错误
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.