javascript - knockout : limit number of characters in an observable field

Question

我的 Knockout View 模型中有一个可观察的名称字段。现在我想限制这个字段中的字符数，如果它超过一定数量。

如果 name = "john smith"然后我有 6 个字符的限制
显示“约翰...”

Answer 1

另一个可重用的解决方案是创建一个自定义绑定(bind)来显示文本的 trim 版本。

这允许底层值不受影响，但为了显示目的 trim 文本。这对于消息预览或将数据放入网格列中很有用。

示例绑定(bind):

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

像这样使用它:

<div data-bind="trimText: myText1"></div>

或者...

<div data-bind="trimText: myText1, trimTextLength: 10"></div>

See Fiddle