Question

我正在开发一个移动页面，并且列出了大约300个项目。当用户访问该页面时，这总共为300kb数据。我已经将jquery listview实现为复合组件，用于动态显示列表视图，显示更多功能和任何内容：

<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项。如果用户然后点击show more，接下来的50个元素应该从服务器获取并呈现，而不再重新加载旧元素。

jquery有一个无限的滚动示例： Jquery infinit scrool

但是他们只使用常量表达式来添加元素。在我的情况下，我想添加cc：insertChildren，其中内容无关紧要，可以动态选择。

在My Bean中，我有一个包含所有元素的列表。另一个想法是，使用ui：repeat的size属性。但要改变这一点，我必须更新我的ui：repeat组件，以便再次下载所有元素。因此，通过简单的数学运算，总下载量将为我的示例50kb + 100 kb + 150kb + 200kb + ...

最后，我想要一个解决方案，在所有滚动之后，当服务器上的所有项目都在开始时呈现时，服务器的总下载大小等于大小。

Answer 1

我已经制作了一个非常简单的解决方案，基于滚动的加载。虽然还有一点问题（不是真正的问题，但是是一个棘手的黑客），我想向其他人提供这个解决方案。

Javascript wait for extern ajax request

我使用primefaces dataTable并滥用内置分页：）

动态添加项目到ui：repeat

1 个答案: