javascript - 淘汰赛：限制可观察字段中的字符数

Question

我的淘汰赛视图模型中有一个可观察的名称字段。现在我想限制该字段中的字符数，如果它超过一定数量。

好像 name = "john smith" 并且我有 6 个字符的限制，然后
显示 "john s..."

Answer 1

另一个可重用的解决方案是创建一个自定义绑定，以显示文本的修剪版本。

这允许基础价值保持不受影响，但为了显示目的而修剪文本。这对于消息预览或将数据拟合到网格列中很有用。

示例绑定：

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>

见小提琴

Answer 2

<span data-bind="text: (name.length > 6 ? name().substring(0, 5) + '...' : name)"></span>

或者你可以在你的 ViewModel 中创建一个计算出来的 observable，比如：

var self = this;

this.shortName = ko.computed(function() {
   return (self.name.length > 6 ? self.name().substring(0, 5) + '...' : self.name);
});

接着：

<span data-bind="text: shortName"></span>

Answer 3

如果您有一个具有最大长度的字段，则 Chris Dixon 的解决方案是完美的。但是如果你必须多次重复这个操作，它就会变得很麻烦。那是你应该编写一个自定义的 observable 扩展器的时候，像这样：

ko.extenders.maxLength = function(target, maxLength) {
    //create a writeable computed observable to intercept writes to our observable
    var result = ko.computed({
        read: target,  //always return the original observables value
        write: function(newValue) {
            var current = target(),
                valueToWrite = newValue ? newValue.substring(0, Math.min(newValue.length, maxLength)) : null;

            //only write if it changed
            if (valueToWrite !== current) {
                target(valueToWrite);
            } else {
                //if the rounded value is the same, but a different value was written, force a notification for the current field
                if (newValue !== current) {
                    target.notifySubscribers(valueToWrite);
                }
            }
        }
    });

    //initialize with current value to make sure it is rounded appropriately
    result(target());

    //return the new computed observable
    return result;
};

然后，您可以在任何 observable 上使用它，并且可以为它们中的任何一个指定不同的最大长度。这消除了 HTML 中的混乱（解决方案 1），以及编写计算 observable 的必要性（解决方案 2）。您只需通过以下方式定义您的 observable：

this.shortName = ko.observable().extend({ maxLength: 25 });

Answer 4

如果你想截断数字输入的值，你可以使用和扩展器来截断值，如下所示：

ko.extenders.truncateValue = function(target, option) {                            
        target.subscribe(function (newValue) {
            if(newValue.length > option){
                target(newValue.substring(0,option));
            }                    
        });

        return target;
    };

然后创建一个自定义绑定，将扩展器附加到可观察对象：

ko.bindingHandlers.maxLength = {
    init:  function (element, valueAccessor, allBindingsAccessor, viewModel) {
        'use strict';                     

        var maxlength = element.getAttribute("maxlength");

        valueAccessor().extend({truncateValue: maxlength })
        ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, viewModel);    
    }   
};

在您的 html 上，您应用 maxLength 绑定，如下所示：

<input type="number" data-bind="maxLength: yourObservable" maxlength="9"></input>