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为空，如何显示“待定”值？

Answer 1

当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 2

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

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 3

另一个只有TBD的观察者怎么样？然后数据绑定像data-bind='foreach: courses().length > 0 ? courses : emptyCourses'

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

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

3 个答案: