2012-04-21 6 views
0

jockery mobile listivewをknockoutjsライブラリを使用して埋めようとしていますが、リストビューのヘッダ(list-divider)が繰り返されています。私はこの問題を解決する方法を、Nickoutjsを使用してJqueryMobile listViewを表示

これは私のコードと助けに感謝していた。

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js" type="text/javascript"></script> 




</head> 
<body> 

<div data-role="page"> 
    <div data-role="header"> 
     <h1>Header</h1> 
    </div> 
    <div data-role="content"> 
      <ul data-role="listview" data-inset="true" data-bind="foreach:seats" data-theme="b" data-filter="true" 
      > 
       <li data-role="list-divider">List </li> 

     <li> 
      <a href="#" ><span data-bind="text:reservationId"></span></a> 

     </li> 

    </ul> 
    </div> 

</div> 
<script type="text/javascript"> 


function Reservation(reservationId, covers) { 

    var self = this; 
    self.reservationId = reservationId; 
    self.covers = covers; 

} 

function ReservationsViewModel() 
{ 
var self = this; 
self.seats = ko.observableArray(); 

self.fillReservations=function() 
{ 

var mydata={ 
      "result":[ 
    { 
     "reservationId": "23424574367436523452345", 
     "covers"  : "4" 
     }, 
     { 
     "reservationId": "23424574367436523452345", 
     "covers"  : "4" 

    } 
] 
    };      

$.each(mydata.result, function (index, value) {     
     self.seats.push(new Reservation(this.reservationId,this.covers)); 
    }); 


}//End fillReservations 
self.fillReservations(); 
}// End ReservationsViewModel 

ko.applyBindings(new ReservationsViewModel());  
    </script> 

</body> 

</html> 

ありがとうございました。

答えて

0

コンテナレス制御フロー構文を使用して私の問題を解決しました。

0

このようにしてみてください。

<ul data-role="listview" id="ListSearch" data-divider-theme="b" data-inset="true" > 
     <li data-role="list-divider" role="heading"> 
       Criteria Selected 
      </li> 
      <!-- ko foreach: Contacts --> 
      <li data-theme="c"> 
       <a href="#page3" data-transition="slide"> 
        <span data-bind="text: FirstName " ></span> 
       </a> 
      </li> 
      <!-- /ko --> 
     </ul> 
関連する問題