Question

渲染网格后，如何将焦点设置为第一个项目。我遇到了一个问题，当网格更新（集合更改）时，整个应用程序都会失去焦点。

我正在使用月光石库。

 { 
    kind: "ameba.DataGridList", name: "gridList", fit: true, spacing: 20, minWidth: 300, minHeight: 270, spotlight : 'container',
    scrollerOptions: 
    { 
       kind: "moon.Scroller", vertical:"scroll", horizontal: "hidden", spotlightPagingControls: true
    }, 
    components: [
       {kind : "custom.GridItemControl", spotlight: true}
   ]
 }

Answer 1

hightlight()是Spotlight的私有方法，它只添加spotlight类，但不执行Spotlight管道的其余部分。 spot()是您应该在内部调用highlight()的方法。

@ ruben-ray-vreeken是正确的，DataList推迟渲染。发现第一个控件的最简单方法是设置moon.DataListSpotlightSupport提供的initialFocusIndex。

http://jsfiddle.net/dcw7rr7r/1/

enyo.kind({
    name: 'ex.App',
    classes: 'moon',
    bindings: [
        {from: ".collection", to: ".$.gridList.collection"}
    ],
    components: [
        {name: 'gridList', kind:"moon.DataGridList", classes: 'enyo-fit', initialFocusIndex: 0, components: [
            {kind:"moon.CheckboxItem", bindings: [
                {from:".model.text", to:".content"},
                {from:".model.selected", to: ".checked", oneWay: false}
            ]}
        ]}
    ],
    create: enyo.inherit(function (sup) {
        return function () {
            sup.apply(this, arguments);

            // here, at least, the app starts in pointer mode so spotting the first control
            // isn't apparent (though it would resume from that control upon 5-way action).
            // Turning off pointer mode does the trick.
            enyo.Spotlight.setPointerMode(false);
            this.set("collection", new enyo.Collection(this.generateRecords()));
        };
    }),
    generateRecords: function () {
        var records = [],
            idx     = this.modelIndex || 0;
        for (; records.length < 20; ++idx) {
            var title = (idx % 8 === 0) ? " with long title" : "";
            var subTitle = (idx % 8 === 0) ? "Lorem ipsum dolor sit amet" : "Subtitle";
            records.push({
                selected: false,
                text: "Item " + idx + title,
                subText: subTitle,
                url: "http://placehold.it/300x300/" + Math.floor(Math.random()*0x1000000).toString(16) + "/ffffff&text=Image " + idx
            });
        }
        // update our internal index so it will always generate unique values
        this.modelIndex = idx;
        return records;
    },
});

new ex.App().renderInto(document.body);

Answer 2

在这里猜测我没有使用Moonstone，但普通的enyo.Datalist在调用render方法时实际上并没有呈现其列表内容。相反，实际的渲染任务被延迟并由gridList的委托稍后执行。

您可能希望深入了解gridList代理的代码并查看其工作原理。您可以创建自定义委托（通过扩展原始委托）并突出显示重置和/或刷新方法中的第一个子节点：

enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));

Answer 3

Ruben的回答补充了我在Enyo论坛上发布的答案，我为了完整起见将其包括在内：

尝试使用

enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));

我在Sampler中的Moonstone DataGridList示例中添加了一个rendered（）函数，我发现这有效：

rendered: function() {
    this.inherited(arguments);
    this.startJob("waitforit", function() {
        enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));
    }, 400);
},

没有延迟就没有工作。

将默认焦点设置在网格列表中的第一项

3 个答案: