对 Ko 视图模型的函数响应调用

Question

我的移动应用程序在应用程序登录时加载 API 个端点。我可以在 DOM 中看到的 API 端点之一 returns 数据。我需要将此数据加载到另一个 view/view-model 中，而无需再次 API 调用数据。

companyDataService.js -（此 returns 在登录时加载的 api 数据端点需要用于我的视图模型的应用程序上的另一个视图）

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

我希望上面返回的数据用于我的 "help text" 视图模型，以便可以将其传递到关联的视图。这是我在我的视图模型中尝试过的：

    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 等......但是我认为它比这简单得多但无法解决它。

这是我的观点 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 调用移出视图模型（以免一遍又一遍地重复），而是传入调用完成后返回的值.

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 和 deferred，但您也可以通过成功回调来完成此操作。如果您使用 jQuery 进行 API 通话，jquery.ajax() implements the promise interface by default。在代码片段中，我假设 jQuery promise 用于我的 API 调用，当它完成 (.done) 时，我使用服务器返回给我的任何内容初始化我的视图模型。

无论如何，如果您不想重复您的 API 调用，请将您的 API 调用移出您的视图模型，确保它只调用一次，并将值传递给您的 API 将您分为页面的不同部分。

Answer 2

companyDataService.js -（这个 returns 在登录时加载的 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 视图模型的函数响应调用

Function response recall to Ko viewmodel

javascript

jquery

knockout.js

durandal