如何在knockout.js中縮短名稱？

Question

我認爲，我需要自定義綁定，

如果文本長於n個字符，請放置「...」並在工具欄上顯示工具提示。

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

Answer 1

我可以編寫自定義綁定無提示：

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

Answer 2

使用與文本溢出CSS3類：省略號財產

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