Question

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

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

如果名称未定义，除了某些值或“”我只需要隐藏div。我怎么做knockoutjs？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需使用visible binding

即可

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

Answer 3

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

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>

Answer 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>

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

条件显示淘汰赛js

4 个答案: