如何在jQuery手機中的不同頁面之間共享ViewModel？

我想在頁面之間共享一個ViewModel。如何在jQuery手機中的不同頁面之間共享ViewModel？

說我有pageA.html和pageB.html和一個單獨的data.js文件。 pageA具有綁定的字段（使用Knockout），點擊一個按鈕後，它移動到pageB，它也有一些綁定到同一個ViewModel的字段。我無法得到這個工作 - 我錯過了什麼？

當然，我可以將所有頁面（data-role =「page」）保存在一個.html文件中，它可以正常工作，但這是唯一的方法嗎？

編輯 - pageB.html是pageA的副本 - 我試圖顯示在許多頁面中沒有另一個登錄功能的問題！

這是代碼：

將pageA.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head lang="en"> 
    <title>PageA</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
    <script src="JS/data.js"></script> 

</head> 
<body> 
    <div data-role="page" id="login"> 

     <div id="loginDetails"> 

      <div data-role="fieldcontain"> 
       <label for="username"> 
        Username:</label> 
       <input type="text" name="name" id="username" data-bind="value: userid" /> 
      </div> 

      <div data-role="fieldcontain"> 
       <label for="pswd"> 
        Password:</label> 
       <input type="text" name="name" id="pswd" data-bind="value: pswd" /> 
      </div> 

     </div> 

     <a id="btnLogin" data-role="button" data-bind="click: login">Login</a> 

    </div> 

    <script type="text/javascript"> 

     ko.applyBindings(S5.myViewModel); 

    </script> 

</body> 
</html>

pageB.html（主要是與上面相同，但它的JavaScript塊似乎並沒有得到所謂的... ）

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head lang="en"> 
    <title>pageB</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
    <script src="JS/data.js"></script> 

</head> 
<body> 
    <div data-role="page" id="abcd"> 

     <div id="loginDetails"> 

      <input type="text" name="name" data-bind="value: userid" /> 

      <input type="text" name="name" data-bind="value: pswd" /> 

     </div> 

    </div> 

    <script type="text/javascript"> 
     debugger; <-- THIS NEVER GETS CALLED!! 

     ko.applyBindings(S5.myViewModel); 

    </script> 

</body> 
</html>

data.js

var S5; 

(function (S5) { 

    S5.myViewModel = { 
     userid: ko.observable('marcel'), 
     pswd: ko.observable('xxx'), 
     login: function() { 

      // ** DO LOGIN CHECK then move to pageB 

      $.mobile.changePage("pageB.html", { transition: "slideup" }); 
     }, 
    }; 

})(S5 || (S5 = {}));

來源

2013-10-02 Marcel

嘗試在'data-role = page' div中移動JS塊。 – Omar

是的 - 這和縮小視圖模型的具體元素的綁定做了竅門 - 再次感謝奧馬爾:)！ – Marcel

你可以寫這個答案，以便我可以標記它的答案？ – Marcel

jQuery Mobile使用Ajax導航來加載和更改視圖。當使用多個html頁面模板時，它完全加載第一頁（html文件）。然而，對於使用Ajax其他視圖/頁牽強，它加載的內容裏面只<body>，忽視其他標籤，即<script>，<head>等等

解決您的問題，移動任何額外的JS庫或代碼中<div data-role="page">。

來源

2013-10-02 09:10:10 Omar

如何在jQuery手機中的不同頁面之間共享ViewModel？

回答

相關問題