knockout.js、knockout可排序和默认文本

knockout.js, knockout-sortable, and default text

本文关键字：knockout 默认 文本 js 排序      更新时间：2024-03-19

我使用的是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>

当数组为空时，您可以创建一个新的绑定或扩展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/

使用虚拟元素绑定：

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

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

相关文章：