Question

我的api调用返回html，但如果该html为空，例如我得到一个“”的控制台html响应，我想使用knockout显示默认消息。所以我猜它需要认识到“”是空的，然后显示我的替代内容 查看模型 -

    var MyText = ko.observable(); 

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


return {
    MyText: MyText

};

查看

<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

有几种方法可以解决它。我个人喜欢尽可能多地保留代码中的代码，所以我会在api回调中检查你的响应数据并将其设置在那里。如果你只是适当地更新observable，就不需要创建凌乱的数据绑定。

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

如果你需要保留api调用实际返回的内容，你可以将逻辑放在计算中，然后绑定到它。

Answer 2

实现此目的的一种方法是使用计算的observable来确定要显示的html集：

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());

如果HTML响应为null，则显示备用内容

2 个答案: