Question

我在WinJS中以编程方式创建一个NavBar，如下所示：

var navEl = document.getElementById('win-navbar-container');    
var navBar = new WinJS.UI.NavBar(navEl);
var containerEl = document.createElement('div');
var navBarContainer = new WinJS.UI.NavBarContainer(containerEl);
var data = [
    { 'label': 'Test 1', 'icon': 'world' },
    { 'label': 'Test 2', 'icon': 'world' },
    { 'label': 'Test 3', 'icon': 'world' }
]
var itemList = new WinJS.Binding.List(data);
navBarContainer.data = itemList

问题是我需要将自己的自定义类添加到navBarCommands。

我可以添加到我的阵列中以实现此目的吗？

提前谢谢。

Answer 1

您可以通过向NavBarContainer提供带有自定义渲染功能的模板对象来管理它：

var navEl = document.getElementById('navbar');
var navBar = new WinJS.UI.NavBar(navEl);
var containerEl = document.createElement('div');
navEl.appendChild(containerEl);

var template = {
    render: function (item, navbarCommandEl) {
        navbarCommandEl.classList.add(item.state);
    }
};
var navBarContainer = new WinJS.UI.NavBarContainer(containerEl, {
    template: template
});
var data = [
    { label: 'Test 1', icon: 'world', state: 'bold' },
    { label: 'Test 2', icon: 'world', state: 'normal'},
    { label: 'Test 3', icon: 'world', state: 'underlined' }
]
var itemList = new WinJS.Binding.List(data);
navBarContainer.data = itemList;

希望有所帮助！：）

将自定义类添加到WinJS.UI.NavBarCommand

1 个答案: