使用转换将项目附加到列表视图

Question

为了尽可能简化我的用例，我从一个硬件接收文件名列表，然后循环遍历并附加到 jquery 移动列表视图。

对于我使用的每次迭代：

$('ul').append('[markup]')
$('ul').listview('refresh');

我已经尝试在标记字符串中和使用选择器向列表项和锚点添加数据转换，但无论我做什么，列表都会在最后更新所有数据，而不是在循环时转换每个项目。我缺少有关 .append 工作原理的一些基本知识？或者我可以在哪里应用转换？

Answer 1

如果我对您的理解正确，您的目标是使用数据转换在列表中的元素中设置动画。这似乎不是数据转换的工作方式：当您单击 link 时，它控制页面 之间的转换，而不是元素本身的动画。

要为元素添加动画，我认为您需要制作自己的动画。像这样：

$(function() { 
  $("#start").click(function() {
    $.each(["One", "Two", "Three"], function (i, val) {
      $('ul').append('<li style="display: none" class="closed"><a>' + val + '</a></li>');
      $('ul').listview('refresh');
      $('ul .closed').slideDown(300, function() { $(this).removeClass('closed'); });
    });    
  });
});

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<a href="#" id="start" class="ui-btn">Start</a>
<ul data-role="listview">
</ul>