2013-05-01 4 views
1

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로 나옵니다.

내가 뭘 놓치고 있니?

감사합니다. 브라이언

답변

0

나는 setupAuditStubListPage 함수가 너무 일찍 호출된다고 생각합니다.

시도는하여 app.js 코드를 raplace합니다 :

var app = { 
    // Application Constructor 
    initialize: function() { 
    }, 

    setupAuditStubListPage: function() { 
     var auditStubController = new AuditStubController(); 
     auditStubController.getAuditStubs(); 
    } 
}; 


$(function() { 
    app.setupAuditStubListPage(); 
}) 
+0

안녕 데미안 - 빠른 응답 주셔서 감사합니다. 불행하게도, 로그인 기회가 생기기 전에 (즉, index.html이로드 되 자마자 id = "loginPage"div가 표시됨) 기능을 제출하는 바람입니다. 유효성이 검증 된 사용자 ID가 없으면 서버에서 아무 것도 얻을 수 없습니다. $ ("auditStubList"). on ("pageinit")을 기다리고있을 때 changePage ("auditStubList")를 호출 할 때까지 기다리고있었습니다. – user1911071