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>
app.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 になるからです。
教祖、私は何が欠けていますか？
ありがとう。ブライアン