JqueryM + knockout.js 菜鸟，所以如果这是一个愚蠢的问题，请原谅我。
我有一个简单的页面流操作，这样用户就可以成功地通过服务器端进行身份验证。伟大的。现在，我想做的是根据用户 ID 显示值列表。Console.logging 告诉我我的服务器调用正在运行。
但。我的 ko.observableArray 不会在我知道在 pageinit 时间执行的调用中呈现我放入其中的数据。如果我将我的代码克隆到一个可以在按钮单击时调用的函数中，事情会以我想要的方式呈现，但我不希望用户必须单击。我认为这可能是我没有得到的时间/周期问题。这是我的代码。
.html
<!DOCTYPE html>
<html>
<head>
<title>REACH Energy Audit Field Client</title>
<script type="text/javascript" src="rte/cordova.js"></script>
<script type="text/javascript" src="rte/rte.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0.css"/>
<link rel="stylesheet" type="text/css" href="css/ePlusTheme.css"/>
<link rel="stylesheet" type="text/css" href="css/app.css"/>
<title>e+ Mobile</title>
</head>
<body>
<div id="LoginPage" data-title="LoginPage" data-role="page" data-theme="a">
<div data-role="content" class="minimalPaddingContent">
<div class="divDivider"></div>
<h3>REACH Energy Audit Login</h3>
<input type="text" placeholder="User Name" id="userName" data-bind="value: userName"/>
<input type="password" placeholder="Password" id="password" data-bind="value: password"/>
<a href="#" data-role="button" id="LoginSubmit" style="width:150px;" class="centeredButton" data-bind="click: loginFunction">Sign In, dummy</a>
<h3 data-bind="visible: messageLength() > 0">
<span data-bind="text: responseMessage"></span>
</h3>
</div>
</div>
<div id="auditStubList" data-title="Audit Listing Page" data-role="page" data-theme="a">
<div data-role="content" class="minimalPaddingContent">
<div class="divDivider"></div>
<h3>Audit Listing</h3>
<Table>
<tr>
<td>This is a test row</td>
</tr>
<tbody data-bind="foreach: auditStubArray">
<tr>
<td><span data-bind="text: address"></span></td>
</tr>
</tbody>
</Table>
<a href="#" data-role="button" id="LoginSubmit" style="width:150px;" class="centeredButton" data-bind="click: reportBindings">report bindings</a>
</div>
</div>
<footer>
</footer>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="js/knockout.2.2.1.min.js"></script>
<script type="text/javascript" src="js/knockout.mapping-latest.js"></script>
<script type="text/javascript" src="rte/cordova.js"></script>
<script type="text/javascript" src="js/constants.js"></script>
<script type="text/javascript" src="js/model/loginModel.js"></script>
<script type="text/javascript" src="js/model/auditStubModel.js"></script>
<script type="text/javascript" src="js/controller/auditStubController.js"></script>
<script type="text/javascript" src="js/controller/controllers.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
应用程序.js
var app = {
// Application Constructor
initialize: function () {
this.setupAuditStubListPage();
},
setupAuditStubListPage: function () {
$('#auditStubList').on('pagebeforeshow',function(event){
var auditStubController = new AuditStubController();
auditStubController.getAuditStubs();
});
}
};
这是我的控制器：
var AuditStubController = function () {
var self = this;
self.auditStubArray = ko.observableArray([new auditStub("","","","","","")]);
self.getAuditStubs = function(){
// LETS GO AHEAD AND TRY TO GET SOME GODDAMNED AUDIT STUBS!
var userToken = localStorage.getItem("userToken");
var theUrl = baseUrl()+"/EnergyAuditing/ws/retrieveAuditStubs.jsonp?callback=auditStubCallback&tokenIn="+userToken;
console.log("submitting to url: "+ theUrl);
$.ajax({
url: theUrl,
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "auditStubCallback" ,
success: function(theData){
console.log("success!!!");
console.log(theData);
console.log("the data length is: "+ theData.theAuditStubs.length);
for (var z=0;z<theData.theAuditStubs.length;z++){
var currentStub = new auditStub(theData.theAuditStubs[z].energyAuditId,
theData.theAuditStubs[z].address,
theData.theAuditStubs[z].startDateTimeIn,
theData.theAuditStubs[z].reachAuditSwIn,
theData.theAuditStubs[z].cisCustomerName);
self.auditStubArray.push(currentStub);
console.log(currentStub);
}
}
});
}
self.auditStubCallback = function(theData){
console.log("got to the function!");
}
self.reportBindings = function(){
console.log("got to report bindings");
self.auditStubArray.push(new auditStub(1, "942 evergreen terrace", "5/1/2013 8:00 am", "true", "brian" ));
// NOTE: ABOVE CALL WORKS; I.E., NEW ADDRESS RENDERS IN UI!
// SIMILARLY, IF I MAKE MY AJAX CALL / LOOP / PUSH CALLS HERE, IT WORKS.
console.log(self.auditStubArray());
}
}
ko.applyBindings(new AuditStubController(), document.getElementById("auditStubList"));
我知道我在 app.js 的代码会触发，因为我可以看到控制台日志亮起。我知道淘汰映射是正确的，因为如果我克隆我的 ajax 调用并将代码推送到虚假的“reportBindings”函数，一切都会出现 AOK。
我错过了什么，大师们？
谢谢。布莱恩