如果值为空KO，则添加"TBD“

Question

我拥有以下KO财产：

self.property= ko.observableArray([]);

以及HTML：

<div data-bind="foreach: pvm.property, visible: pvm.property().length">
    <p data-bind="text: address"></p>
</div>

如果pvm.property为空，如何显示"TBD“值？

Answer 1

您还没有真正解释“优雅的解决方案”是什么意思。一种方法可能是不使用visible隐藏元素，而是创建一个用于自定义样式并对空状态内容使用::after伪元素的css类。

​

var i = 0;
var items = ko.observableArray([]);
var add = function() {
  items.push(++i);
};

ko.applyBindings({
  items: items,
  add: add
});

.is-empty::after {
  content: "TBD";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="foreach: items, css: {'is-empty': !items().length }">
    <p data-bind="text: $data"></p>
</div>

<button data-bind="click: add">add item</button>

​

您甚至可以在元素中定义占位符文本，并在css中保持其动态：

.is-empty::after {
  content: attr(data-placeholder);
}

在html中：

<div data-placeholder="TBD" ... ></div>

或

<div data-bind="attr: { 'data-placeholder': 'TBD' }"></div>

​

var i = 0;
var items = ko.observableArray([]);
var add = function() {
  items.push(++i);
};

ko.applyBindings({
  items: items,
  add: add
});

.is-empty::after {
  content: attr(data-placeholder);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="foreach: items, 
                css: {'is-empty': !items().length },
                attr: {'data-placeholder': 'TBD' }">
    <p data-bind="text: $data"></p>
</div>

<div data-placeholder="TBD" data-bind="foreach: items, 
                css: {'is-empty': !items().length }">
    <p data-bind="text: $data"></p>
</div>



<button data-bind="click: add">add item</button>

​

Answer 2

您可以在property数组有长度时显示元素，这意味着当property数组没有长度时，可以对另一个元素执行相同的操作。

<div data-bind="foreach: pvm.property, visible: pvm.property().length">
    <p data-bind="text: address"></p>
</div>
<div data-bind="visible: !pvm.property().length">TBD</div>

为了改善用户体验，您可以使用CSS隐藏其中一个(或两者)，直到绑定实际运行为止。这将防止元素在页面加载和视图模型加载之间的瞬间跳跃。

Answer 3

再来一个有TBD的可观察到的怎么样。然后像data-bind='foreach: courses().length > 0 ? courses : emptyCourses'那样的数据绑定

这是一把小提琴。https://jsfiddle.net/othkss9s/22/