Wenn die HTML-Antwort Null ist, wird alternativer Inhalt angezeigt

Question

Mein API-Aufruf gibt HTML zurück, aber wenn dieser HTML-Code leer ist, z. Ich bekomme eine Konsolen-HTML-Antwort von "", ich möchte eine Standardnachricht mit Knockout anzeigen. Ich vermute also, dass es erkennen muss, dass "" leer ist und dann meinen alternativen Inhalt anzeigt.
anzeigen Modell -

var MyText = ko.observable(); 

    var company = shell.authenticatedCompany(); 
    hazibo.helpTextGet(company.name, company.userName, company.password).then(function (data) { 
     MyText(data); 
    }); 


return { 
    MyText: MyText 

};

View -

<section class="help-text"> 
    <div class="flex-container"> 
     <div class="flex-item" data-bind="html: MyText">This is my alternate message if the html response is ""</div> 
    </div> 
</section> 

Answer 1

Es gibt ein paar Möglichkeiten, wie Sie darüber gehen könnte. Persönlich möchte ich so viel Code wie möglich aus dem Markup heraus behalten, also würde ich Ihre Antwortdaten im api Callback überprüfen und dort einstellen. Keine Notwendigkeit, unordentlich aussehende Datenbindungen zu erstellen, wenn Sie die Observable nur entsprechend aktualisieren.

hazibo.helpTextGet(company.name, company.userName, company.password).then(function (data) { 
    if(!data) { 
     MyText("This is my alternate message..."); 
    }else{ 
     MyText(data); 
    } 
}); 

Wenn Sie bewahren, was eigentlich der api-Aufruf zurück Sie die Logik in einem statt berechnet platzieren konnten, und dass binden.

Answer 2

Eine Möglichkeit, dies zu erreichen, ist eine berechnete beobachtbar zu verwenden, die von HTML-Anzeige eingestellt, um zu bestimmen:

https://jsfiddle.net/dw1284/ucnewzwo/

HTML:

<section class="help-text"> 
    <div class="flex-container"> 
    <div class="flex-item" data-bind="html: ItemHtml()"></div> 
    </div> 
</section> 

JavaScript:

function ViewModel() { 
    var self = this; 

    // Html populated from API call 
    self.MyText = ko.observable(''); 

    // Default Html 
    self.Default = ko.observable('This is my alternate message if the html response is ""'); 

    // Computed observable chooses which HTML to display (bind this to view) 
    self.ItemHtml = ko.computed(function() { 
    if (!self.MyText() || self.MyText() === '') { 
     return self.Default(); 
    } else { 
     return self.MyText(); 
    } 
    }); 
} 

ko.applyBindings(new ViewModel());