1

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。

我错过了什么，大师们？

谢谢。布莱恩

4

1 回答 1

0

我认为 setupAuditStubListPage 函数调用得太早了。

尝试通过以下方式替换您的 app.js 代码：

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

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


$(function () {
    app.setupAuditStubListPage();
})
于 2013-05-01T17:51:54.310 回答