对Ko的功能响应调用viewmodel

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

companyDataService.js - （这个返回一个加载所需要的另一种观点上的应用程序为我的视图模型登录的API数据端点）

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

我想上面的数据返回用于我“帮助文本”视图模型，以便它可以传递给关联的视图。这是我在我的视图模型中所尝试的：

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:[email protected]" 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>

来源

2016-09-27 Tom Rudge

灿你发布你的绑定MyText？另外，你从API返回什么样的数据？标记？ –

@NickDeFazio只是标记。添加了绑定 –

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 
};

来源

2016-09-30 13:18:23

如果我理解正确的问题，你有你的页面（或其他视图模型）上进行的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:[email protected]" 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

在这个例子中，我把你所得到的，并增加了一个方式为我观察到的一个初始值传递，并且在提供什么定义了默认，或者如果它是空白。我还将API调用从视图模型中移出，所以现在视图模型只有依赖于初始化时传入的内容。

对于API调用，我建议再看一下promise和deferreds，但是您也可以通过成功回调来完成此操作。如果您使用jQuery进行API调用，请致电jquery.ajax() implements the promise interface by default。在片段中，我假设我的API调用使用了jQuery承诺，并且在完成（.done）时，我使用服务器返回的任何内容初始化我的viewmodel。

在任何情况下，如果您不想重复您的API调用，请将您的API调用从视图模型中移出，确保只调用一次，然后将API提供给您的值传递到页面的不同部分。

来源

2016-09-27 16:41:23

对Ko的功能响应调用viewmodel

回答

相关问题