0
私はモバイルページで作業しており、約300アイテムのリストを持っています。ユーザーがそのページにアクセスすると、これは合計300kbのデータです。動的にアイテムをUIに追加する：repeat
私が何をしたいのか<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の項目に言わせて：動的ショーより多くの機能を持つListViewコントロールと任意のコンテンツを表示するために 私は複合コンポーネントとしてjqueryのリストビューを実装しました。ユーザーがさらにshow moreをクリックすると、次の50要素がサーバーから取得され、古い要素を再度ロードせずにレンダリングされます。
はjqueryのためのINFINITスクロール例があります： Jquery infinit scrool
しかし、彼らは、要素を追加するための唯一の定数式を使用します。私の場合は、cc：insertChildrenを追加します。ここでは内容は重要でなく、動的に選択することができます。
My Beanには、すべての要素を持つリストがあります。別の考えは、ui：repeatのsize属性を使用することでした。しかし、それを変更するには、私はui：repeatコンポーネントを更新しなければならないので、すべての要素が再びダウンロードされます。それで簡単な数学では、ダウンロードしたサイズは私の例では50kb + 100kb + 150kb + 200kb +です。
最後に私は、すべてのスクロールした後、すべての項目が開始時にレンダリングされるときのサイズに変換します。