简介
ember-list-view 是一个适用于 Ember.js 框架的虚拟列表组件。它能够帮助我们处理大量数据的情况下，优化列表的性能，提高用户体验。
安装
发布在 npm 上的 ember-list-view 包支持在你的项目中被使用。
使用命令行工具进入项目根目录，输入以下命令即可安装：
$ npm install ember-list-view --save
引入
在合适的地方引入 ember-list-view，比如在 app.js 中，我们可以这样写：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------- ---- ----------------------------
------ --------------------- ---- ---------------------------------
-------------------------------
----- ------------------
----------- --------------------- -
------------------------------------------- -------------------
------------------------------------------------ -----------------------
-
---如上所示，我们在应用程序的初始化器中注册 list-view 和 list-item-view 组件。这个过程会自动地将这些组件提供给整个应用程序。
使用
列表组件
现在，我们已经将 ember-list-view 添加到我们的 Ember.js 应用程序中了。我们可以开始使用它来为用户显示大量数据。从最基本的部分开始：
{{#list-view}} //和{{#each}}的使用方法一致
{{#list-item-view}} //这里是我们封装了的组件
Item Here!
{{/list-item-view}}
{{/list-view}}如上所示，我们创建了一个 list-view，将数据项以及每一项的模板包含在 list-item-view 组件中。现在我们可以扩展这些部分并在每个条目中使用更多的信息。
数据
首先，我们需要将数据分配给 ember-list-view。通常，我们会从组件的属性中获取数据，传递到子组件中使用模板进行渲染。 如：
{{#list-view content=model}} //将view的model当作list-view的content
{{#list-item-view}}
<p>{{name}}</p> //这里的数据来源于model中的属性
{{/list-item-view}}
{{/list-view}}注意：传递给 list-item-view 的数据将是作为每个列表项的上下文。
自定义模板
list-item-view 的封装将收到一个上下文对象，可以使用此对象中包括的信息进行渲染。 因此，我们完全可以为每个列表项创建自定义的HTML元素：
{{#list-view content=model}}
{{#list-item-view tagName='div' classNames='list-item'}}
<img {{bind-attr src=img}} alt={{name}}>
<p>{{name}}</p>
<p>Height: {{height}}cm - Weight: {{weight}}kg</p>
{{/list-item-view}}
{{/list-view}}list-item-view 组件接受很多不同的属性，可以帮助我们进一步自定义列表项的外观。
加速列表
使用 virtualization 属性可以极大地提高列表的性能——仅渲染用户当前可见的列表项。
{{#list-view content=model virtualization=true}}
{{#list-item-view tagName='div' classNames='list-item'}}
<p>{{name}}</p>
{{/list-item-view}}
{{/list-view}}总结
我们已经学习了使用 npm 包 ember-list-view 的基础知识。现在，你可以为你的 Ember 应用程序添加虚拟列表，并在数据量很大的情况下提高列表性能。同时，我们也了解了几个 list-view 和 list-item-view 的组件属性，如 content 和 virtualization，这些属性可以帮助我们以更高效的方式显示数据。
示例代码
下面来看一下使用 ember-list-view 组件的简单示例。
app.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------- ---- ----------------------------
------ --------------------- ---- ---------------------------------
----- ----- - -
- ----- ------- ------- ------ ------- ----- ---- ----------------------------------------------- --
- ----- ------- ------- ------ ------- ----- ---- ------------------------------------------------- --
- ----- ------ ------- ------ ------- ----- ---- ----------------------------------------------- --
-- --- -----
--
-------------------------------
----- ------------------
----------- --------------------- -
------------------------------------------- -------------------
------------------------------------------------ -----------------------
-
---
------ ------- -------------------------
-----
---app/templates/application.hbs
{{#list-view content=model virtualization=true}}
{{#list-item-view tagName='div' classNames='list-item'}}
<img {{bind-attr src=img}} alt={{name}}>
<p>{{name}}</p>
<p>Height: {{height}}cm - Weight: {{weight}}kg</p>
{{/list-item-view}}
{{/list-view}}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ba563576b7b1ecc22