knockout.js，knockout-sortable和默认文本

Question

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

这与此stackoverflow问题有关 ，但由于我的要求不同：我不能将文本放在父元素之外。 这意味着：

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

Answer 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>

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

Answer 2

您可以创建新绑定或扩展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/