I have an observable name field in my knockout view model.
Now i want to limit the number of characters in this field if it exceeds certain number.
As if name = john smith and i have a limit of 6 characters then
display john s...
Another reusable solution is to create a custom binding that displays a trimmed version of the text.
This allows the underlying value to remain unaffected, but trims the text for display purposes. This would be useful for something like a message preview, or for fitting data into a grid column.
Example binding:
ko.bindingHandlers.trimLengthText = {};
ko.bindingHandlers.trimText = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var trimmedText = ko.computed(function () {
var untrimmedText = ko.utils.unwrapObservable(valueAccessor());
var defaultMaxLength = 20;
var minLength = 5;
var maxLength = ko.utils.unwrapObservable(allBindingsAccessor().trimTextLength) || defaultMaxLength;
if (maxLength < minLength) maxLength = minLength;
var text = untrimmedText.length > maxLength ? untrimmedText.substring(0, maxLength - 1) + '...' : untrimmedText;
return text;
});
ko.applyBindingsToNode(element, {
text: trimmedText
}, viewModel);
return {
controlsDescendantBindings: true
};
}
};
Use it like this:
<div data-bind=trimText: myText1></div>
or...
<div data-bind=trimText: myText1, trimTextLength: 10></div>
