Question

我正在构建一个调用API的移动应用。在应用程序登录时调用API的端点，我在DOM中看到结果加载。我想推迟或保证输出/结果，然后单击按钮在应用程序内打开另一个视图/页面。当应用程序在开始时调用API并点击按钮以打开所需的页面视图时，应用程序会加载端点两次。

我遇到的问题是将结果打包为承诺，然后发送到viewmodel，准备好将knockout传递给我的视图。

应用程序使用的承诺服务是“q”并且还具有“promisehelper”。不熟悉任何以及我应该如何使用它们。

Dataservice.js在app load运行 - （这会调用构建API端点的函数）

 function getHelpText(companyName, userName, password) {
        return q.when(home.helpTextGet(company.name, company.userName, company.password));
    }

Viewmodel.js - （需要从数据服务中调用promise）

        var MyText = ko.observable();

        var company = shell.authenticatedCompany();
        return q.getHelpText()
            .then(function(data) {
                if (!data) {
                    MyText(document.getElementById('no-help').innerHTML = '<div class="flex-item"><p>Request help from home Support:<br /><a href="mailto:support@home.com" class="low-profile-btn btn btn-lg"><i class="fa fa-info-circle"></i>&nbsp;Contact Home Support</a></p></div>');
                } else {
                    MyText(data);
                }
            });
        return {
            MyText: MyText
        };
        });

View.html - 在页面/视图上显示结果

<section class="help-text">
<div class="flex-container">

    <div id="no-help" class="help-content" data-bind="html: MyText"></div>

</div>

Answer 1

您可以将返回的数据放入MyText并使用＆＃34;如果＆＃34;并且＆＃34; ifnot＆＃34;标记中的绑定：

代码：

   var MyText = ko.observable();

    var company = shell.authenticatedCompany();
    return q.getHelpText()
        .then(function(data) {
            MyText(data);
        });
    return {
        MyText: MyText
    };
    });

标记：

<section class="help-text">
<div class="flex-container">
    <!-- ko if: MyText -->
    <div id="no-help" class="help-content" data-bind="html: MyText"></div>
    <!-- /ko -->
    <!-- ko ifnot: MyText -->
    <div id="no-help" class="help-content">
    <div class="flex-item">
        <p>Request help from home Support:<br />
        <a href="mailto:support@home.com" class="low-profile-btn btn btn-lg"><i class="fa fa-info-circle"></i>&nbsp;Contact Home Support</a>
        </p>
    </div>
    </div>
    <!-- /ko -->
</div>

返回q.promise - knockout / app

1 个答案: