knockout.js - ノックアウト.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
};