Question

我的移动应用在应用登录时加载API端点。其中一个API端点返回我在DOM中可以看到的数据。我需要将这些数据加载到另一个视图/视图模型中，而无需再次对数据执行另一个API调用。

companyDataService.js - （这将返回在我的视图模型的应用上另一个视图所需的登录时加载的api数据端点）

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

我希望上面返回的数据用于我的＆＃34;帮助文本＆＃34;视图模型，因此可以传递给关联的视图。以下是我在视图模型中尝试的内容：

    var MyText = ko.observable();

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



    return {
        MyText: MyText
    };

}）;

关于如何做到这一点的任何想法？要在此视图模型中使用的预加载数据？如果有人可以提供帮助，我会非常感激，因为我把头发拉出来看看承诺，q.defer等......但是我认为它比这简单得多，但却无法设法解决。< / p>

这是我的观点ko：

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

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

</div>

Answer 1

如果我正确理解了问题，您之前已在您的页面（或其他视图模型）上进行了API调用，该调用从您的服务器获取了一些数据。现在，您需要在另一个视图模型中使用相同的数据，并且不想再次调用API。

基于发布的代码，我建议将初始API调用移出viewmodel（不要一遍又一遍地重复），而是在调用完成后传入返回的值。

var HelpTextViewModel = function(helpMarkup){
  var self = this;
  var defaultMarkup = '<div class="flex-item"><p>Request help from Support:<br /><a href="mailto:support@company.com" class="low-profile-btn btn btn-lg"><i class="fa fa-info-circle"></i>&nbsp;Contact Support</a></p></div>';

  //Use default text if nothing was passed in
  //Side note - when using the knockout html binding, you can simply call myObservable(myHtml), no need to crawl the dom and set inner html.
  self.helpText = ko.observable((helpMarkup && helpMarkup !== "") ? helpMarkup : defaultMarkup);
};



$.when(myAPICallPromise).done(function(apiData){
  console.log("API data:", apiData);
    ko.applyBindings(new HelpTextViewModel(apiData));
    //Do something else with my API data if I want to...
});

Fiddle

在这个例子中，我拿走了你所拥有的东西，并添加了一种方法来传递我的observable的初始值，并且如果没有提供任何东西，或者它是空白的，则定义了默认值。我还将API调用移出视图模型，因此现在视图模型仅依赖于初始化时传递的内容。

对于API调用，我建议再看看promises和deferreds，但是你也可以通过成功回调来实现这一点。如果您使用jQuery进行API调用，jquery.ajax() implements the promise interface by default。在代码片段中，我假设我的API调用使用了jQuery promise，当它完成（.done）时，我用服务器给我的任何东西初始化我的viewmodel。

在任何情况下，如果您不想重复API调用，请将API调用移出viewmodel，确保仅调用一次，并将API提供给您的值传递到页面的不同部分。

Answer 2

companyDataService.js - （这将返回在我的视图模型的应用上另一个视图所需的登录时加载的api数据端点）

function getHelpText(companyName, userName, password) {
        return api.helpTextGet(company.name, company.userName, company.password).then(function (helpText) {
            company.helpText = helpText;
        });
    }

我的观点模型 -

      var MyText = ko.observable();

        var company = shell.authenticatedCompany();
        MyText(company.helpText);




    return {
        MyText: MyText
};

函数响应调用到Ko viewmodel

2 个答案: