我正在尝试使用 json 结果填充列表视图。我已经安装了提琴手,并且可以承认我确实得到了 json 结果。我积极验证了 JSON 结果。但是不知何故,它们没有出现在列表视图中。我似乎无法找出哪里出了问题。
JSON 结果:[{"Id":1,"Title":"Electrical"},{"Id":2,"Title":"Piping"},{"Id":3,"Title":"Mechanical" },{"Id":4,"Title":"软件"}]
代码:
<!DOCTYPE html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<style>
.count {
position: absolute;
font-size: 11px;
font-weight: bold;
padding: .2em .5em;
top: 50%;
margin-top: -1em;
}
.ui-li-aside {
float: right;
width: 50%;
text-align: right;
margin: 1.4em 0px 0px 0px !important;
position: absolute;
right: 25px;
}
.ui-li-heading, .ui-li-desc {
width: 90%;
text-overflow: ellipsis;
}
strong { font-style: normal; }
</style>
<script type="text/javascript" >
var hackerNews = (function($,undefined) {
var pub = {}, $this = $(this);
pub.init = function() {
$("#btnRefresh").live("click", function () {
pub.getAndDisplayNews();
});
$this.bind("news.updated", function (e, news) {
displayNews(news);
});
$this.bind("news.updated", function(e, news) {
$("#itemCount").text(news.items.length);
});
};
pub.getAndDisplayNews = function() {
//$.mobile.loading();
getNews(function () {
//$.mobile.loading();
});
};
function getNews(callback) {
$.ajax({
url: "http://localhost:31634/expertREST.svc/GetKnowledgeFields",
dataType: "jsonp",
success: function (data, textStatus, xhr) {
$this.trigger("news.updated", data);
if (callback) callback(data);
}
});
}
function displayNews(news) {
var newsList = $("#hackerNews").find(".newsList");
newsList.empty();
$("#newsItem").tmpl(news.items).appendTo(newsList).trigger("create");
newsList.listview("refresh");
}
return pub;
}(jQuery));
hackerNews.init();
hackerNews.getAndDisplayNews();
</script>
</head>
<body>
<div data-role="page" id="hackerNews">
<div data-role="header" data-backbtn="false">
<a id="btnRefresh" href="#" data-icon="refresh">Refresh</a>
<h1>Find-an-Expert <span id="itemCount" class="count ui-btn-up-c ui-btn-corner-all">0</span></h1>
</div>
<div id="content" data-role="content">
<ol class="newsList" data-role="listview"></ol>
</div>
</div>
<script id="newsItem" type="text/x-jquery-tmpl">
<li data-messageId="${Id}" class="newsItem">
<h3>${Title}</h3>
</li>
</script>
</body>
有人有线索吗?谢谢