javascript - WinJS:是否可以通过编程方式向数据透视项添加预算？

Question

我正在使用 WinJS 构建一个 Windows Phone 8.1 应用程序，并且我在 Pivot 元素中有一个 PivotItem:

<div data-win-control="WinJS.UI.Pivot">
    <div class="conversations"
         data-win-control="WinJS.UI.PivotItem"
         data-win-res="{winControl: {'header': 'conversations'}}">
     </div>
</div>

我试图在标题旁边添加预算以显示类似于 Facebook 通知计数的未读对话计数，但没有成功。

已经尝试过:

WinJS.UI.Pages.define("/conversations.html", {
ready: function (element, options) {
        var span = document.createElement('DIV')
        span.innerHTML = "<span>5</span>";

        var p = document.querySelector(".conversations");
        p.appendChild(span);
    }
}

还有 CSS:

.conversations ::after{
    content: "3";
}

但仍然没有运气。有什么想法吗？

提前致谢!

Answer 1

找到一个解决方法:

var pivotHeader = document.querySelector(".win-pivot-headers");

if(pivotHeader != null)
{
        var headers = pivotHeader.childNodes;
        for (var i = 0; i < headers.length; i++) {
            var badge = document.createElement('span');
            badge.id = "unseenConversationsBudge";
            badge.innerHTML = "10";

            headers[i].appendChild(badge);
            WinJS.UI.Animation.fadeIn(badge);
        }
    }

然后在app的inicialization事件和header item的animationstart/animationend事件中处理。还必须检查并删除跨度(如果存在)以避免重复。