javascript - Knockout JS 内联三元

Question

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

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

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

理想情况下，这会检查预览文本，如果没有，则会返回另一条消息。我已经尝试过实现这一点，但我无法让它发挥作用。

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

Answer 1

我的第一个建议是不要将此逻辑放在数据绑定(bind)中，而是放在 View 模型中。它更容易调试、更容易更改，并保持 HTML 可读。

我假设您有一个可观察的字符串来保存预览文本，但可以为空。 (如果下次您也能显示实际的 javascript 模型，将会有所帮助)

要生成标签，您可以使用 ko.compulatedObservable 或 ko.pureCompulated。一个例子:

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

每当 originalLabel 更新时，

displayLabel 也会更新。如果原始标签为空，则返回默认文本“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>