@abcum/ember-gridlist 中文文档教程
ember-gridlist
用于在 Ember.js 应用程序中为大数据工作负载构建高效列表和网格的插件。
Usage
Installation
ember install @abcum/ember-gridlist
Introduction
ember-gridlist 插件添加了 fu 使用列表和网格的功能，支持以列表或网格格式高效地增量渲染大量项目，支持单击或双击，支持多选，同时在调整视口大小时重新渲染. 每个列表或网格将仅显示必要数量的项目以填充所需的布局，并在其他项目滚动到视图中时呈现它们。
Examples
添加基本列表视图。
{{#list-view content=model rowHeight=68}}
{{content.fullname}}
{{/list-view}}
或者为每个项目分配一个自定义类。
{{#list-view content=model rowHeight=68 itemClass='person'}}
{{content.fullname}}
{{/list-view}}
或者为项目使用单独的模板。
{{list-view content=model rowHeight=68 itemName='people/list'}}
并在单击项目时执行操作。
{{#list-view content=model rowHeight=68 on-click=(transition-to 'person')}}
{{content.fullname}}
{{/list-view}}
并在双击项目时执行操作。
{{#list-view content=model rowHeight=68 on-dblclick=(transition-to 'person')}}
{{content.fullname}}
{{/list-view}}
或者为每个项目添加一个具有预定宽度和高度的网格视图。
{{#grid-view content=model colWidth=200 rowHeight=360 on-click=(transition-to 'person'}}
<img src="{{content.avatar}}" />
{{content.fullname}}
{{/grid-view}}
Development
make install(install bower and ember-cli dependencies)make upgrade(upgrade ember-cli to the specified version)make tests(run all tests defined in the package)
ember-gridlist
An addon for building efficient lists and grids for large data workloads in an Ember.js app.
Usage
Installation
ember install @abcum/ember-gridlist
Introduction
The ember-gridlist addon adds functionality for working with lists and grids, enabling efficient incremental rendering of large numbers of items in list or grid format, with single click or double click support, and multi-selection support, whilst at the same time re-rendering when the viewport is resized. Each list or grid will display only the necessary number of items to fill the desired layout, rendering other items as and when they are scrolled into view.
Examples
Add a basic list view.
{{#list-view content=model rowHeight=68}}
{{content.fullname}}
{{/list-view}}
Or assign a custom class to each item.
{{#list-view content=model rowHeight=68 itemClass='person'}}
{{content.fullname}}
{{/list-view}}
Or use a separate template for the items.
{{list-view content=model rowHeight=68 itemName='people/list'}}
And perform an action when an item is clicked.
{{#list-view content=model rowHeight=68 on-click=(transition-to 'person')}}
{{content.fullname}}
{{/list-view}}
And perform an action when an item is double-clicked.
{{#list-view content=model rowHeight=68 on-dblclick=(transition-to 'person')}}
{{content.fullname}}
{{/list-view}}
Or add a grid view with a predetermined width and height for each item.
{{#grid-view content=model colWidth=200 rowHeight=360 on-click=(transition-to 'person'}}
<img src="{{content.avatar}}" />
{{content.fullname}}
{{/grid-view}}
Development
make install(install bower and ember-cli dependencies)make upgrade(upgrade ember-cli to the specified version)make tests(run all tests defined in the package)
