动态添加项目到UI：重复

我正在移动页面上，并有一个列表约300项。用户访问该页面时总共有300kb的数据。我实现了一个jQuery的列表视图作为复合材料部件的动态显示与显示功能更加列表视图和任何内容：动态添加项目到UI：重复

<cc:interface> 
    <cc:attribute name="items" /> 
</cc:interface> 

<cc:implementation> 
     <form class="ui-filterable"> 
      <input id="filterable-input" data-type="search" placeholder="Search track..." />     
     </form> 
     <ul id="list" data-role="listview" data-filter="true" data-inset="true" data-input="#filterable-input"> 
      <ui:repeat id="repeater" value="#{cc.attrs.items}" var="item"> 
       <li style="padding: 0 10px"> 
        <cc:insertChildren/> 
       </li> 
      </ui:repeat> 
     </ul> 
     <input type="button" value="Show more" /> 
</cc:implementation>

我想要做什么，减少第一渲染，让我们对50项说。如果用户再点击显示，那么接下来的50个元素应该从服务器获取并渲染，而不用再次加载旧元素。

没有为一个jquery的无界滚动例如： Jquery infinit scrool

但是他们仅使用常量表达式用于添加元素。在我的情况下，我想添加cc：insertChildren，其中的内容并不重要，可以动态选择。

在我的Bean我有一个所有元素的列表。另一个想法是，使用ui的size属性：repeat。但要改变这一点，我必须更新我的ui：repeat组件，并重新下载所有元素。因此，容易的数学总下载大小将为我的例子50kb + 100 kb + 150kb + 200kb + ...

最后，我想有一个解决方案，在所有滚动从服务器的总下载大小是相等的到所有项目都在开始渲染时的大小。

来源

2017-01-26 kaiser

我已经做了一个非常简单的解决方案，基于滚动的加载。尽管仍然存在一些小问题（不是真正的问题，而是棘手的黑客攻击），但我想为其他人提供这个解决方案。

Javascript wait for extern ajax request

我使用primefaces DataTable，并滥用内置的分页:)

来源

2017-02-16 15:21:52 kaiser

动态添加项目到UI：重复

回答

相关问题