列表視圖風格問題，改變頁面

我使用的是knockout.js上MVC4平臺結合一起jQuery Mobile的一個單頁應用程序的工作..列表視圖風格問題，改變頁面

這是我主要的div頁面上按鈕時：

<div data-role="page" id="pageMain"> 
<div data-role="content"> 
    <a href="#" id="btnExisting" data-bind="click: $root.GetHeader" data-role="button" data-theme="b"">View Invoices</a> 
</div> 
</div>

這是我的目標DIV頁：

<div data-role="page" id="pageExisting"> 
    <div data-role="header"> 
     <h1>Existing Invoices's</h1> 
     <a data-rel="back" data-role="button">Back</a> 
    </div> 
    <div class="choice_list" data-role="content" data-bind="visible: Headers().length > 0"> 

     <ul id="headersList" data-role="listview" data-bind="foreach: Headers" data-filter-placeholder="Search Invoice" data-filter-theme="a" data-inset="true" 
      data-filter="true" data-theme="b"> 

      <li> 

       <a href="#" data-inline="true"> 

        <h2>Invoice No.: <span data-bind="text: inv_no"></span></h2> 

        <p>Amount.: <span data-bind="text: inv_amt"></span></p> 
       </a> 
     </ul> 

    </div> 
</div>

下面是腳本部分：

var HeaderViewModel = function() { 
     //Make the self as 'this' reference 
     var self = this; 
    self.Headers = ko.observableArray([]); 
function GetHeaders() { 
     //Ajax Call Get All Employee Records 
     // self.GetHeaders = function() { 

     $.ajax({ 
      type: "GET", 
      url: "/api/InvAPI", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (data) { 

       self.Headers(data); 


      }, 
      complete: function() { 
       $.mobile.changePage("#pageExisting"); 

      }, 
      error: function (error) { 
       alert(error.status + "<--and--> " + error.statusText); 
      } 
     }); 

    } 
self.GetHeader = function() { 
     GetHeaders(); 
    } 
    }; 


$(document).ready(function() { 
ko.applyBindings(new HeaderViewModel()); 
}

當我點擊按鈕「查看發票」時，我得到一個典型的Jquery手機格式化列表視圖但問題是當我點擊後退按鈕，再次導航到「PageExisiting」div頁面我沒有造型的列表數據..

在這兩種情況下查看頁面源時，我注意到在第二次導航; Li標籤沒有屬性。

我試圖像一些解決方案：列表視圖刷新頁面破壞，頁面創建行之前：

$.mobile.changePage("#pageExisting");

沒有運氣。

我卡在這裏的傢伙，我會展示頁面之前非常感謝您提出的解決方案

感謝

來源

2013-04-20 Haz

你從哪裏試過listview刷新？ – Omar 2013-04-20 19:44:09

@Omar我在線之前試過：$。mobile.changePage（「＃pageExisting」）; – Haz 2013-04-20 20:12:18

試試這個。 '（'pageshow'，'#pageID'，function（）{$（'[data-role = listview]'）。listview（'refresh'）;}）;'或'pagebeforeshow '。試試 – Omar 2013-04-20 20:51:08

刷新列表視圖。

$('#pageID').on('pagebeforeshow', function() { 
$('[data-role=listview]').listview('refresh'); 
});

來源

2013-04-20 23:53:16 Omar

列表視圖風格問題，改變頁面

回答

相關問題