条件显示淘汰赛js答案

【问题标题】：Conditional display knockout js条件显示淘汰赛js
【发布时间】：2016-05-06 04:10:32
【问题描述】：

我有一个条件，根据我的数据显示或隐藏一个跨度。

<span id="spanName" style="color:red" data-bind="text:$data.Name"></span>

如果 Name 是 undefined ，除了一些值或 "" 我只需要隐藏 div。淘汰赛怎么办？

【问题讨论】：

为什么我的答案不正确？有一个样本和解释。

标签： javascript jquery html knockout.js

【解决方案1】：

试试这个，它使用visible 绑定，所以看到在可见中我调用了可观察对象，因此我们可以验证可观察对象的值。所以在 JS 中 undefined、null、0 和 "" 与 false 相同，因此有关此的更多信息请参阅 False values：

function viewModel(){
  this.text = ko.observable();
  
}

ko.applyBindings(new viewModel());

span{

  padding: 5px;
  background-color: red;
  color: #fff;
  margin-top: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<input type="text" data-bind="textInput: text"/>
<br/>
<br/>
<span data-bind="text:text, visible: text()"></span>

【讨论】：

【解决方案2】：

你也可以创建一个计算结果

function ViewModel() {
      this.Name = ko.observable(),
      this.nameHasValue = ko.computed(function() {
            return this.Name !== undefined;
      }, this);
};

<span id="spanName" style="color:red" data-bind="visible: nameHasValue, text: Name"></span>

【讨论】：

【解决方案3】：

只需使用visible binding

<span id="spanName" style="color:red" 
      data-bind="text:$data.Name, visible:$data.Name !== undefined"></span>

【讨论】：

【解决方案4】：

假设 Name 是可观察的，您可以通过简单地添加以下内容来设置可见性：

<span id="spanName" style="color:red" data-bind="text:$data.Name, visible: $data.Name()"></span>

此外，如果您想在可见性为真时具体要求，则可以包括以下条件：

<span id="spanName" style="color:red" data-bind="text:$data.Name, visible: $data.Name() != null && $data.Name() != ''"></span>

如果您想检查仅包含空格或其他条件的字符串，上述内容很有用。

【讨论】：