knockout.js - 如何在 knockout.js 中缩短名称？

Question

我想，我需要自定义绑定，

如果文本长于 n 个字符，则放置“...”并在鼠标悬停时显示工具提示。

<div data-bind="shortenText:name, maxLength:10" ></div>

Answer 1

使用带有 text-overflow: ellipsis 属性的 css3 类

.truncate {
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 2

我可以编写没有工具提示的自定义绑定：

ko.bindingHandlers.truncatedText = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
        length = ko.utils.unwrapObservable(allBindingsAccessor().length) || ko.bindingHandlers.truncatedText.defaultLength,
        truncatedValue = value.length > length ? value.substring(0, Math.min(value.length, length)) + " ..." : value;

        ko.bindingHandlers.text.update(element, function () { return truncatedValue; });
    },
    defaultLength: 15
};