动态元素追加到jQuery Mobile的ListView控件 [英] Dynamically Appending Elements to jQuery Mobile ListView
问题描述
我要动态地添加通过URL JSON格式收到我的列表视图数据。但我无法弄清楚它是如何工作的。
该移动网站检索对象的格式如下：
[
{ID：1，开始：2011-10-29T13：15：00.000 + 10：00，底：2011-10-29T14：15：00.000 + 10：00，标题 ：会议}
]
在html的我有一个ListView和功能，在那里我尝试追加接收到的数据。我只显示了身体。
＆LT;身体GT;
＆LT; DIV＆GT;
＆LT; UL ID =列表视图＆GT;
＆LT;脚本＆GT; $的getJSON（URL，
功能（数据）{
$每个（数据，功能（我的数据）{
i.title.appendTo（＃列表视图）;
}）;}）;＆其中; /脚本＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
也许这很容易，但我是新来的网络编程，我可以不知道怎样，我应该追加检索到的数据。
任何人都可以请帮我吗？
//使AJAX调用网址
$ .getJSON（URL，功能（数据）{
//声明一个变量，用以建设我们输出（这是最好的缓冲输出，仅做一追加在最后，因为DOM操作是CPU贵）
无功输出='';
//遍历数据（我们也可以摆脱的jQuery在这里用'的（数据键）{
$每个（数据，函数（指数值）{
//添加每个值到输出缓冲区（我们也可以访问该对象的其他属性：ID，开始和结束）
输出+ ='＆LT;李＆GT; + value.title +'＆LT; /李＆GT;';
}）;
//现在追加缓冲输出到ListView，要么刷新列表视图或创建它（意思是有jQuery Mobile的样式表）
$（'＃列表视图）追加（输出）.listview（'刷新'）; //或者如果列表视图尚未初始化，使用'.trigger（'创建'）;`，而不是`.listview（'刷新'）;`
}）;
下面是上述解决方案的的jsfiddle（也有使用的例子为（）{} 而不是 $。每（） ）： http://jsfiddle.net/VqULm/
I want to dynamically append data received via an url in JSOn format to my listview. But i can't figure out how it works.
The mobile website retrieve the object in the following format:
[
{"id":1, "start":"2011-10-29T13:15:00.000+10:00", "end":"2011-10-29T14:15:00.000+10:00", "title":"Meeting"}
]
In the .html i have one listview and a function, where i try to append the received data. I show only the body.
<body>
<div>
<ul id="listview">
<script>$.getJSON("url",
function(data){
$.each(data, function(i,data){
i.title.appendTo("#listview");
});});</script>
</ul>
</div>
</body>
Probably it's very easy, but i'm new to web programming and i can't figure out how that i should append the retrieved data.
Can anyone please help me out ?
//make AJAX call to url
$.getJSON("url", function(data){
//declare a variable with which to build our output (it's best to buffer output and only do one append at the end since DOM manipulation is CPU expensive)
var output = '';
//iterate through the data (we could also get rid of the jQuery here by using `for (key in data) {
$.each(data, function(index, value){
//add each value to the output buffer (we also have access to the other properties of this object: id, start, and end)
output += '<li>' + value.title + '</li>';
});
//now append the buffered output to the listview and either refresh the listview or create it (meaning have jQuery Mobile style the list)
$('#listview').append(output).listview('refresh');//or if the listview has yet to be initialized, use `.trigger('create');` instead of `.listview('refresh');`
});
Here is a jsfiddle of the above solution (there is also an example of using for(){} instead of $.each()): http://jsfiddle.net/VqULm/
这篇关于动态元素追加到jQuery Mobile的ListView控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
