javascript - 具有 knockout 绑定(bind)的空值的默认文本

Question

我使用相同的可观察对象来显示和编辑 View ，如下所示。我希望每当返回值为 null 时，默认文本(“-”)就会出现在显示 View 中，但我不希望在编辑 View 中出现该文本。如何才能实现这一目标？

function ViewModel() {
  var self = this;
  self.txt1 = ko.observable();
  self.txt2 = ko.observable();
}

// View Mode
<span data-bind="text:txt1"></span>
<span data-bind="text:txt2"></span>

// Edit Mode
<input type="text" data-bind="value:txt1" />
<input type="text" data-bind="value:txt2" />

Answer 1

您可以使用 computed observable返回 View 模式的值，使用它来检查当前存储的值并在必要时返回 -:

function ViewModel() {
  var self = this;
  self.txt1 = ko.observable();
  self.txt2 = ko.observable();

  self.viewtxt1 = ko.computed(function() {
    if (self.txt1() == null)
      return '-';

    return self.txt1();
  });

  self.viewtxt2 = ko.computed(function() {
    //txt2 is checked for null or blank, use whichever is appropriate
    if (self.txt2() == null || self.txt2() == '')
      return '-';

    return self.txt2();
  });
                              
}

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
// View Mode<br />
<span data-bind="text:viewtxt1"></span><br />
<span data-bind="text:viewtxt2"></span><br />
<br />
// Edit Mode<br />
<input type="text" data-bind="value:txt1" /><br />
<input type="text" data-bind="value:txt2" /><br />

上面有两个不同的检查。仅检查 txt1 是否为 null，因此，如果您对其进行编辑并删除所有字符，则空白值将保留在 View 中。 txt2 会检查 null 和空白，因此删除所有字符会将 View 重置回 -。使用适合您的任何一种。