Question

我正在尝试检查某些数据是否为空，然后显示数据或消息。

我现在有以下代码显示我的文本并在其末尾添加省略号。

<p data-bind="text:$data['Preview Text'] + '...'"></p>

理想情况下，这会检查preview text，如果没有，则会返回另一条消息。我已经准备好了，但是我无法让它发挥作用。

<p data-bind="text: preview() ? $data['Preview Text'] + '...' : 'aaaaaaaa'"></p>

Answer 1

我的第一个建议是不将此逻辑放在数据绑定中，而是放在viewmodel中。它更易于调试，更易于更改，并使您的HTML可读。

我假设您有一个可观察的字符串，用于保存预览文本，但可以为空。（如果下次你也展示你的实际javascript模型会有所帮助）

要生成标签，您可以使用ko.computedObservable或ko.pureComputed。一个例子：

var originalLabel = ko.observable("A label");
var displayLabel = ko.pureComputed(function() {
  return originalLabel() ? originalLabel() + "..." : "No Label";
});

只要displayLabel更新，

originalLabel就会更新。如果原始标签为空，则返回默认文本"No Label"。如果原始标签不为空，则会向其添加"..."。

一个工作示例：

var VM = function() {

  this.originalLabel = ko.observable("Initial Text");
  this.displayLabel = ko.pureComputed(function() {
    var originalLabel = this.originalLabel();
    return originalLabel ? originalLabel + "..." : "No label set";
  }, this);
};

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>


<input type="text" data-bind="value: originalLabel, valueUpdate: 'keyup'" />

<div>Generated value: <strong data-bind="text: displayLabel"></strong>
</div>

Knockout JS Inline三元

1 个答案: