Question

我是一个包含以下HTML代码段的WinJS页面：

<div class="productivity-view">
    <div class="categorylist" aria-label="Category List">
    </div>
    <div class="itemlist" aria-label="Work Item List">
    </div>
</div>

我能够以编程方式初始化两个列表：

 var categories = new WinJS.Binding.List(list),
 categoryListEl = document.querySelector(".categorylist"),
 catList = new WinJS.UI.ListView(categoryListEl, {
     itemDataSource: categories.dataSource,
     itemTemplate: document.querySelector('.categoryitemtemplate'),
     onselectionchanging: function(event) {
         var items = event.detail.newSelection.getItems();
         items.done(function(selections) {
             var selection = selections[0],
                 item = selection.data,
                 boxes = categoryListEl.querySelectorAll('.win-itembox');

             boxes[catList.currentItem.index].classList.remove('active');
             boxes[selection.index].classList.add('active');
             workItemHeader.textContent = item.title;
             workList.itemDataSource = new WinJS.Binding.List(item.workitems).dataSource;
         });
     }
 });

 var workItemListEl = document.querySelector(".itemlist"),
 workList = new WinJS.UI.ListView(workItemListEl, {
     itemTemplate: document.querySelector('.workitemtemplate'),
     onselectionchanging: function() {}
 });

上面的代码在第一个列表中侦听onselectionchanging事件，在这种情况下，事件数据带有一些用于填写第二个列表的信息。

如何以编程方式触发第一个列表中第一个项目的onselectionchanging？

Answer 1

我们想通了。解决方法代码如下我们想要触发第一个列表中第一个项目的选择，然后将一些信息放入第二个列表'onselectchanging'。这涉及到'完成'状态的'onloadingstatechanged'事件，然后将列表中的第一项添加到第一个列表的选择中（缺少API知识）。

var catList = new WinJS.UI.ListView(categoryListEl, {
    ...
    onselectionchanging: function (event) {
        ...
    },
    onloadingstatechanged: function () {
        if (this.winControl.loadingState === "complete") {
            // try to select the first item in the list
            catList.selection.add({ key: 0, index: 0, hasFocus: true, showFocus: false });
        }
    }
});

var workItemListEl = document.querySelector("#itemListControl"),
    workList = new WinJS.UI.ListView(workItemListEl, {
    ...,
    onselectionchanging: function () {
        ....
    }
});

在WinJS ListView上触发'click'或'onselectionchanging'

1 个答案: