淘汰JS内联三元

Knockout JS Inline Ternary

本文关键字：三元 JS 淘汰      更新时间：2023-09-26

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

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

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

理想情况下，这将检查preview text，如果没有，那么它将返回另一条消息。我曾尝试过实现这一点，但我无法实现。

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

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

我假设您有一个可观察的字符串，其中包含预览文本，但可以为空。（如果下次也显示实际的javascript模型，那会有所帮助）

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

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

CCD_ 4在CCD_。如果原始标签为空，则返回默认文本"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>

相关文章：