如何缩短knockout.js中的名字？

Question

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

如果文字超过n个字符，请放置“...”并显示工具提示onmouseover。

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

Answer 1

使用带有text-overflow：省略号属性的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
};