Funktionsantwort Rückruf nach Ko viewmodel

Question

Meine mobile App lädt API-Endpunkte beim App-Login. Einer der API-Endpunkte gibt Daten zurück, die ich im DOM sehen kann. Ich brauche diese Daten in ein anderes View/View-Modell geladen, ohne einen weiteren API-Aufruf für die Daten erneut durchführen zu müssen.

companyDataService.js - (dies gibt den api Datenendpunkt, die bei der Anmeldung erforderlich lädt für einen anderen Blick auf die App für meine Ansicht-Modell) für meine verwendet

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

Ich möchte die Daten zurück oben zu Ansichtsmodell "Hilfetext", damit es an die zugehörige Ansicht übergeben werden kann. Hier ist, was ich in meinem Sicht-Modell versucht habe:

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

});

Irgendwelche Ideen, wie man das macht? vorgeladene Daten, die in diesem View-Modell verwendet werden sollen? Wenn jemand mit diesem helfen kann, wäre sehr geschätzt, wie ich meine Haare aus dem Blick auf Versprechen, q.defer etc ... aber ich denke, es ist viel einfacher als das, aber nur nicht schaffen, es auszuarbeiten.

Dies ist meiner Ansicht nach ko:

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

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

</div> 

Answer 1

companyDataService.js - (dies gibt den api Datenendpunkt, die bei der Anmeldung für einen anderen Blick auf die App für meine Ansicht-Modell benötigt lädt)

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

Meine Ansicht Modell -

 var MyText = ko.observable(); 

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




    return { 
     MyText: MyText 
}; 

Answer 2

Wenn ich das Problem richtig bin zu verstehen, Sie einen API-Aufruf auf der Seite zuvor gemacht haben (oder eine andere Ansichtsmodell), die einige Daten erhalten aus dein Server. Jetzt benötigen Sie dieselben Daten in einem anderen Ansichtsmodell und möchten die API nicht erneut aufrufen.

Basierend auf dem Code geschrieben, würde ich vorschlagen, die anfängliche API-Aufruf aus dem Viewmodel (um es nicht immer wieder zu wiederholen), und übergeben Sie stattdessen den Wert zurückgegeben, sobald der Aufruf abgeschlossen ist.

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

In diesem Beispiel habe ich, was man hatte, und fügte hinzu, eine Art und Weise in einem Anfangswert für meine beobachtbar zu passieren, und eine Standard definiert, wenn nichts vorhanden ist, oder wenn es leer ist. Ich habe auch den API-Aufruf aus dem Ansichtsmodell entfernt, so dass jetzt das Ansichtsmodell nur auf dem basiert, was bei der Initialisierung übergeben wurde.

Für die API-Aufruf, würde ich vorschlagen, einen Blick auf Versprechen und Aufschub, aber Sie könnten dies auch mit einem Erfolg Callback erreichen. Wenn Sie jQuery für Ihre API-Aufrufe verwenden, geben Sie jquery.ajax() implements the promise interface by default ein. Im Snippet nehme ich an, dass ein jQuery-Versprechen für meinen API-Aufruf verwendet wurde, und wenn es abgeschlossen ist (.done), initialisiere ich mein Ansichtsmodell mit dem, was mir der Server zurückgegeben hat.

In jedem Fall, wenn Sie Ihre API-Aufrufe nicht wiederholen möchten, verschieben Sie Ihren API-Aufruf aus Ihrem Ansichtsmodell, stellen Sie sicher, dass er nur einmal aufgerufen wird und übergeben Sie den Wert Ihrer API an verschiedene Teile Ihrer Seite.