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


    Lists

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

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

    Repeater

         enyo.Repeater是一个简单的list controlRepeater重复内部包含的control setRepeater组件都复制创建的item项,隐藏在itemcontrol中。每个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内部的事件处理方法来控制rowcontrol的渲染。应用可以强制row使用listrenderRow(inIndex)方法来更新一个特定的row

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

  • 相关阅读:
    C# using 实现强制资源清理
    MySQL workbench How to create a new model
    无法启动windows audio服务,错误提示126.
    Process of knowledge discovery in databases
    Android 应用程序中资源的引用
    Javadoc使用方法
    Android xml 布局
    load data with matlab
    Android中string.xml使用总结
    Introduction to Indigo
  • 原文地址:https://www.cnblogs.com/waimai/p/2932735.html
Copyright © 2020-2023  润新知