私はJqueryモバイルを初めて使用します。db から ListView を設定する必要があります。このフォーラムのリンクをチェックしていました：
http://www.isgoodstuff.com/2012/06/10/html5-custom-listviews-with-jquerymobile/
同じことをしたいのですが、データベースからすべてのデータ（画像と対応するデータ）を取得したいです。リモート データソースから Listview にデータを入力できました。でもそれは単純なことで、何のイメージもありませんでした。以下がそのコードです。しかし、ここでそのアプローチを適用して、リストビューとリモート データ ソースからのデータ バインディングをよりカスタマイズする方法がわかりません。
<div data-role="content">
<ul data-role="listview" id="contentListView" data-inset="true" data-filter="true"></ul>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var serviceUrl='http://mydatasource:81/Service.asmx/show';
$.ajax({
url:serviceUrl,
success:function(xml){
setTimeout(function(){
feedItem = '';
$(xml).find( "newset" ).each(function(){
var item = $(this),
title = item.find('EmployeeID').text(),
link = item.find('FirstName').text()
feedItem = feedItem + '<li class="test"><a class="test2" href="#">';
feedItem = feedItem + link;
feedItem = feedItem + '</a></li>';
});
$('#contentListView').append(feedItem);
},100);
},
error:function(){
},
dataType:"xml"
});
});
</script>
ありがとう。バビア。
返信ありがとうございます..本当に感謝しています..しかし、同じコードを試してみると、「ネットワークエラーが発生しました!」にリダイレクトされます。アラート。私は何かが欠けていますか？ところで、ビジュアルスタジオでこれを試しました。これが私の完全なコードです。
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
li span
{
font-weight: normal;
}
</style>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>
XML Parsing demo</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="cars-data">
</ul>
</div>
</div>
<div data-role="page" id="cars">
<div data-role="header">
<a data-role="button" data-transition="none" data-theme="a" href="#index">Back</a>
<h1>
</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="car-data">
</ul>
<img src="" width="100%" style="height: auto;" id="car-img">
</div>
</div>
<script type="text/javascript" charset="utf-8">
$('#index').live('pagebeforeshow', function (e, data) {
$('#cars-data').empty();
$.ajax({
type: "POST",
url: "/echo/xml/",
dataType: "xml",
data: {
xml: "<cars><car><name>TOYOTA</name><country>JAPAN</country><pic>http://1call.ms/Websites/schwartz2012/images/toyota-rav4.jpg</pic><description>Toyota has announced that it will recall a total of 778,000 units that may have been manufactured with improperly-tightened nuts on the rear suspension.</description></car></cars>"
},
success: function (xml) {
ajax.parseXML(xml);
},
error: function (request, error) {
alert('Network error has occurred!');
}
});
});
$("#cars").live('pagebeforeshow', function () {
$("#cars div[data-role='header'] h1").html(carObject.carName);
$('#car-data').empty();
$('#car-data').append('<li>Car Type:<span> ' + carObject.carName + '</span></li>');
$('#car-data').append('<li>Car Country:<span> ' + carObject.carCountry + '</span></li>');
$('#car-data').append('<li>Car Description:<span> ' + carObject.description + '</span></li>');
$('#car-data').listview('refresh');
$('#car-img').attr('src', carObject.img)
});
var ajax = {
parseXML: function (result) {
$(result).find("car").each(function () {
carObject.carName = $(this).find('name').text();
carObject.carCountry = $(this).find('country').text();
carObject.img = $(this).find('pic').text();
carObject.description = $(this).find('description').text();
$('#cars-data').append('<li><a href="#cars"><img src="' + carObject.img + '" title="sample" height="100%" width="100%"/><h3>Car type:<span> ' + carObject.carName + '</span></h3><p>' + carObject.description + '</p></a></li>');
});
$('#cars-data').listview('refresh');
}
}
var carObject = {
carName: '',
carCountry: '',
img: '',
description: ''
}
</script>
</body>
</html>
ありがとう