enyo官方开发入门教程翻译一Layout之Lists

Lists

     大多数应用需要展示一组数据。

     创建一个拥有大量数据项的界面并且在渲染滚动方面表现良好的跨平台list control是很有挑战性的。由此，enyo提供了两种处理list数据的策略。当应用需要处理密切相关的少量数据项目时（10~100）应当使用enyo.Repeater。当应用需要处理大量的相对简单的数据时（百万级），应当使用enyo.List。

Repeater

     enyo.Repeater是一个简单的list control。Repeater重复内部包含的control set。Repeater组件都复制创建的item项，隐藏在item的control中。每个control都可以放在repeater中，应用可以与这些control正常交互。

     Count属性指定了control重复item的数量。每一个副本都会触发onSetupItem事件。你可以处理该事件来定制设置单个行，例如：

{kind: "Repeater", count: 2, onSetupItem: "setImageSource", components: [

    {kind: "Image"}

]}

 

setImageSource: function(inSender, inEvent) {

    var index = inEvent.index;

    var item = inEvent.item;

    item.$.image.setSrc(this.imageSources[index]);

    return true;

}

     一定要从你的onSetupItem处理程序返回true以防止其他事件处理程序进一步修改您的item control。

     Repeater在调用setCount后会重建，即使count值没有变化。这个行为与大多数的属性不同，一般属性调用setValue方法时如果值没有发生变化属性也不会发生变化。这样做是为了容纳潜在的修改数据模型的repeater，不管item count是否与之前一样。

     注意，如果repeater的内容需要滚动，那么这个repeater应当放在enyo.Scroller内部。

List

     enyo.List是用来展示可滚动数据行的control。它可以有效的渲染大量数据行，经过优化可以在指定的时间内渲染部分数据。这样使用flyweight pattern来达到这个目的，一旦list被创建这个control就会把它放在内部但是逐项渲染。因此，在list中最好只使用简单的control，如enyo.Control和enyo.Image。

注意，enyo.List包含scroller，所有它不必放在enyo.Scroller内部。

     List的components语句块中包含每一行的control，这些control会随行渲染。你可以通过处理onSetupItem事件来定制数据行的渲染。例如：

components: [

    {kind: "List", fit: true, count: 100, onSetupItem: "setupItem", components: [

        {classes: "item", ontap: "itemTap", components: [

            {name: "name"},

            {name: "index", style: "float: right;"}

        ]}

    ]}

]

可以写一个这样的事件处理程序：

setupItem: function(inSender, inEvent) {

    // given some available data.

    var data = this.data[inEvent.index];

    // setup the controls for this item.

    this.$.name.setContent(data.name);

    this.$.index.setContent(inEvent.index);

},

itemTap: function(inSender, inEvent) {

    alert("You tapped on row: " + inEvent.index);

}

     如例所示，我们可以在事件的index属性中使用发源事件的行id（如inEvent.index）。

     可以修改enyo.List中数据行的内容，但为了更有效的修改List，必须了解flyweight部分在list中如何实现。

Flyweight

     每当list row渲染时总会触发onSetupItem事件。应用因此可以调用control内部的事件处理方法来控制row中control的渲染。应用可以强制row使用list的renderRow(inIndex)方法来更新一个特定的row。

     另外，可以为flyweight context适当的定制函数来创建能够更灵活交互的control。List中的control事件可以使用event.index(正在交互的row的索引和control的flyweight)和event.flyweight。List的prepareRow(inIndex)方法可以为特定的row指定control，与那个row永久交互。当交互完成时，会调用list的lockRow方法。

转载于:https://www.cnblogs.com/waimai/archive/2013/02/25/2932735.html