2012-03-16 100 views
0

全部。我有一个Ajax和jquery移动加载问题。使用ajax + jquery mobile添加html元素

api = 
    update: -> 
    console.log "updated" 
    $.ajax 
     dataType: "jsonp" 
     url: "http://localhost:3004/videos.json" 
     success: (data) => 
     if data 
      data.forEach (elem) => 
      video_id = elem.video_id 
      embed_id = elem._id 
      $("#play_list").append " 
      <ul data-role='listview' data-theme='a'> 
       <li>hello</li> 
       </ul> 
      " 
    t = api.update() 

我尝试将此代码插入到html文件中。

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/> 
    <link href="bootstrap/css/bootstrap.responsive.css" rel="stylesheet"/> 
    <body> 
    <div id="play_list"></div> 
    </body> 
<script> 
head.js(
"lib/jquery.js", 
"lib/jquery.mobile-1.0.1.min.js", 
"http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.6/underscore-min.js", 
"http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js", 
"http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js", 
    "app.js" 
); 
</script> 
</html> 

输出HTML代码

<ul data-role='listview' data-theme='a'> 
<li>hello</li> 
</ul> 

但它不jQuery的移动样式设置格式。它只是输出正常的html样式。 我想输出如下图片http://brooky.cc/wp-content/uploads/2011/04/list_view1.png

请帮忙。

在此先感谢。

回答

1

fine manual

调用列表视图插件

您可以直接调用任意选择列表视图插件,就像任何jQuery插件:

$('#mylist').listview(); 

该库自动在所有列表中调用listview()该页面时,事情开始了,据我所知它基本上做到这一点:

$('[data-role=listview]').listview(); 

如果你添加一个新的列表,你只需要.listview()它:

success: (data) => 
    if data 
    data.forEach (elem) => 
     video_id = elem.video_id 
     embed_id = elem._id 
     ul = $(" 
     <ul data-role='listview' data-theme='a'> 
      <li>hello</li> 
     </ul> 
     ") 
     $("#play_list").append ul 
     ul.listview() 

演示:http://jsfiddle.net/ambiguous/pMF4G/

你可以也一次添加它们:

success: (data) => 
    if data 
    uls = $() 
    data.forEach (elem) => 
     video_id = elem.video_id 
     embed_id = elem._id 
     uls = uls.push(" 
     <ul data-role='listview' data-theme='a'> 
      <li>hello</li> 
     </ul> 
     ") 
    $("#play_list").append uls 
    uls.listview() 

演示:http://jsfiddle.net/ambiguous/BdqeC/

+0

谢谢!这行得通。 :) – nobinobiru 2012-03-16 03:31:00