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

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

我正在使用月光石图书馆。

 {
    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}
   ]
 }

最佳答案

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);

关于javascript - 将默认焦点设置为网格列表中的第一项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27556505/