Question

我正在尝试使用knockoutjs库来填充jquery mobile listivew，但我的问题是列表视图（list-divider）的标题是重复的。我想知道如何解决这个问题，

这是我的代码并感谢您的帮助。

<!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>

感谢您的帮助。

Answer 1

我使用无容器控制流语法解决了我的问题。

Answer 2

尝试这样：

    <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>

使用Knockoutjs填充JqueryMobile listView

2 个答案: