0

我对 VSTS 和开发自定义小部件还很陌生。我遵循了示例教程：添加仪表板小部件

下面是 index.html 文件的以下 JS 代码：

<script type="text/javascript">
    VSS.init({                        
        explicitNotifyLoaded: true,
        usePlatformStyles: true
    });

    VSS.require("TFS/Dashboards/WidgetHelpers", function (WidgetHelpers) {
        WidgetHelpers.IncludeWidgetStyles();
        VSS.register("HelloWorldWidget", function () {                
            return {
                load: function (widgetSettings) {
                    var $title = $('h2.title');
                    $title.text('Hello World');

                    return WidgetHelpers.WidgetStatusHelper.Success();
                }
            }
        });
        VSS.notifyLoadSucceeded();
    });
</script>

注意：这是一个非常简单的示例，因为没有 VSS API 调用或 ajax 请求。

实现什么return WidgetHelpers.WidgetStatusHelper.Success();？我也不明白是做什么VSS.notifyLoadSucceeded();的。如果我想通过 ajax（异步请求）进行 API 调用，那么我应该在代码中的什么位置放置这些语句？

看看以下似乎有效的代码行......我不确定这是否是使用这些 VSS 语句的正确方法：

VSS.require(["TFS/Dashboards/WidgetHelpers", "VSS/Authentication/Services"], function (WidgetHelpers, VSS_Auth_Service) {
        WidgetHelpers.IncludeWidgetStyles();
        VSS.register("ajaxrequesttest", function () {
            var makeRequest = function (widgetSettings) {
                VSS.getAccessToken().then(function (token) {
                    // Format the auth header
                    var authHeader = VSS_Auth_Service.authTokenManager.getAuthorizationHeader(token);
                    var epicId = '#####';
                    var epicUrl = `https://myurl/${epicId}`;
                    //Make Ajax Request
                    $.ajax(epicUrl, {
                        headers: {
                            "Authorization": authHeader
                        },
                        timeout: 10000,
                        success: function (data, status, xhr) {
                            $('#myText').text("Success!");
                            var $list = $('<ul>');
                            $list.append($('<li>').text("Response: " + JSON.stringify(data)));
                            $('#myText').append($list);
                        },
                        error: function (xhr, status, error) {
                            $('#myText').text("Error!");
                            return WidgetHelpers.WidgetStatusHelper.Failure(error.message);
                        }
                    });
                });
                return WidgetHelpers.WidgetStatusHelper.Success();
            }
            return {
                load: function (widgetSettings) {
                    var $title = $('h2.title');
                    $title.text('Ajax Request Test');

                    return makeRequest(widgetSettings);
                }
            }
        });
        VSS.notifyLoadSucceeded();
    });

如果有人可以回答以下问题，那就太好了：

  • WidgetHelpers.WidgetStatusHelper.Success() 有什么作用？
  • VSS.notifyLoadSucceeded() 做什么？
  • 我应该何时何地使用它们？
  • 是否有任何关于 VSS.Services 提供的功能的文档？例如，当我需要“VSS/Authentication/Services”时，我应该如何知道如何使用 VSS_Auth_Service 而无需查看该教程？是否有所有客户端的 API 参考文档？

注意：以下链接没有帮助，因为它缺少对特定服务的特定函数调用，例如...

4

1 回答 1

2

对于您的问题：

WidgetHelpers.WidgetStatusHelper.Success() 有什么作用？

WidgetHelpers.WidgetStatusHelper.Success()用于告诉事情function (widgetSettings)已经成功执行。您还可以参考博客创建 VSTS 仪表板小部件。

What does VSS.notifyLoadSucceeded() do?

VSS.notifyLoadSucceeded()用于显示所需的库已成功加载。正如API所描述的：

通知主机扩展成功加载（停止显示加载指示器）

我应该何时何地使用它们？

WidgetHelpers.WidgetStatusHelper.Success()在加载结束或重新加载某些东西时需要。并且VSS.notifyLoadSucceeded()需要在回调结束时指示扩展已成功加载。

是否有任何关于 VSS.Services 提供的功能的文档？例如，当我需要“VSS/Authentication/Services”时，我应该如何知道如何使用 VSS_Auth_Service 而无需查看该教程？是否有所有客户端的 API 参考文档？

不幸的是，除了Visual Studio Services Web Extension SDK和一些示例扩展之外，没有此类文档。

于 2018-04-30T06:12:15.883 回答