Question

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

这与this 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>

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/

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

2 个答案: