Question

我使用相同的observable来显示和编辑视图，如下所示。我希望只要返回值为null，就会在显示视图中显示默认文本（＆＃39; - ＆＃39;），但我不希望在编辑视图中显示该文本。怎么可能实现呢？

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

这可能不是最典型的Knockout.js解决方案，但它运行良好且速度非常快。您可以使用<span>代替<input />使用HTML placeholder="-" readonly="readonly"。您可能还需要设置样式以隐藏边框。

<input class="readonly" data-bind="value:txt1" readonly placeholder="-" />
<input class="readonly" data-bind="value:txt2" readonly placeholder="-" />

.readonly {
    border: 0;
}

http://jsfiddle.net/Lbf3uxqe/

Answer 2

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

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进行检查，因此如果您对其进行编辑并删除所有字符，则空白值将在视图中保留。 txt2检查null并显示空白，因此删除所有字符会将视图重置为-。使用适合您的任何一种。

Answer 3

根据我的另一个答案，computed的替代方法是编写一个全新的custom binding handler。这意味着您只在视图模型上具有一个observable，而逻辑包含在绑定处理程序中。请注意，您需要更改视图以使用此绑定处理程序，而不是使用它所使用的text绑定：

ko.bindingHandlers.textdefault = {
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var v = valueAccessor();
    var d = allBindings.get('defaultIfBlank') || '-';
    element.innerText = (v() == null || v() == '') ? d : v();
  }
};

function ViewModel() {
  var self = this;
  self.txt1 = ko.observable();
  self.txt2 = ko.observable();           
}

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="textdefault:txt1"></span><br />
<span data-bind="textdefault:txt2, defaultIfBlank: '$'"></span><br />
<br />
// Edit Mode<br />
<input type="text" data-bind="value:txt1" /><br />
<input type="text" data-bind="value:txt2" /><br />

请注意，在这种方法中，我们还可以通过allBindings变量自定义处理程序 - 在上面我添加了一个参数，以便在条目为空时自定义显示哪个字符。

带有敲除绑定的空值的默认文本

3 个答案: