0

我正在使用 knockout.js 和，如果数组中没有传递给绑定的元素，knockout-sortable我目前正在尝试在父元素内获取一些默认文本。sortablesortable

这与这个 stackoverflow question 有关，但由于我的要求而有所不同：我不能在父元素之外放置文本。意思是，这个：

<div data-bind="if: pets().length > 0">These are the pets:</div>
<div data-bind="if: pets().length == 0">There aren't any pets. To add a pet...</div>
<div data-bind="foreach: pets">

...对我无效。文本需要包含在 foreach 循环中，因此它也可以用作放置区域。我确实看过knockout-punches图书馆，但我还没有想出使用它的解决方案。我对纯粹的淘汰赛解决方案或插件持开放态度。

我的代码目前如下所示：

<div class="my-drop" data-bind="foreach: { template: 'myTemplate', data: myContainerList}"></div>
4

2 回答 2

1

使用虚拟元素绑定：

<div>
<span data-bind="if: pets().length > 0">These are the pets:</span>
<span data-bind="if: pets().length == 0">There aren't any pets. To add a pet...</span>
<!-- ko foreach: pets -->
<!-- /ko -->
</div>

虚拟绑定是处理需要包含一些固定项和可变项的列表的情况的标准方法。

于 2013-12-05T20:16:33.563 回答
1

您可以创建新的绑定或扩展foreach以在数组为空时显示某些内容。这是一个扩展的示例foreach。

var origForeachUpdate = ko.bindingHandlers.foreach.update;
ko.bindingHandlers.foreach.update = function(element, valueAccessor) {
    var options = valueAccessor();
    if (options.defaultText) {
        var array = ko.unwrap(options.data);
        if (!array || !array.length) {
            element.innerText = options.defaultText;
        } else if (element.innerText == options.defaultText) {
            element.innerText = "";
        }
    }
    origForeachUpdate.apply(this, arguments);
};

http://jsfiddle.net/mbest/Z7BeM/

于 2013-12-05T21:11:01.443 回答