JqueryM + knockout.js noob, 이것이 멍청한 질문이라면 저를 용서하십시오.Knockout.js 이벤트가 pageinit 또는 pageready 시간에 UI를 변경하지 않지만 클릭 시간에 UI를 변경하지 마십시오
사용자가 서버 끝으로 성공적으로 인증 할 수 있도록 간단한 페이지 흐름을 운영하고 있습니다. 큰. 이제는 사용자 ID를 기반으로 값 목록을 표시하고 싶습니다. Console.logging은 내 서버 호출이 작동 중임을 알려줍니다.
그러나. 내 ko.observableArray는 pageinit 시간에 실행중인 호출에서 데이터를 렌더링하지 않습니다. 버튼 클릭시 호출 할 수있는 함수에 코드를 복제하면 원하는대로 렌더링되지만 사용자가 클릭하지 않아도됩니다. 나는 이것이 아마도 타이밍/사이클 문제라고 나는 생각하지 않는다. 여기 내 코드가있다. 나는 내가 볼 수 있기 때문에 내 코드에 불을 app.js 것을 알고
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"));
: .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>
여기
var app = {
// Application Constructor
initialize: function() {
this.setupAuditStubListPage();
},
setupAuditStubListPage: function() {
$('#auditStubList').on('pagebeforeshow',function(event){
var auditStubController = new AuditStubController();
auditStubController.getAuditStubs();
});
}
};
내 컨트롤러 app.js 콘솔 로그가 켜집니다. 녹아웃 매핑이 정확하다는 것을 알고 있습니다. 왜냐하면 아약스 호출을 복제하고 위조 된 'reportBindings'함수에 코드를 푸시하면 모든 것이 AOK로 나옵니다.
내가 뭘 놓치고 있니?
감사합니다. 브라이언
안녕 데미안 - 빠른 응답 주셔서 감사합니다. 불행하게도, 로그인 기회가 생기기 전에 (즉, index.html이로드 되 자마자 id = "loginPage"div가 표시됨) 기능을 제출하는 바람입니다. 유효성이 검증 된 사용자 ID가 없으면 서버에서 아무 것도 얻을 수 없습니다. $ ("auditStubList"). on ("pageinit")을 기다리고있을 때 changePage ("auditStubList")를 호출 할 때까지 기다리고있었습니다. – user1911071