Нокаут: ограничение числа символов в наблюдаемом поле

Question

У меня есть наблюдаемое поле имени в моей модели с нокаутом. Теперь я хочу ограничить количество символов в этом поле, если оно превышает определенное число.

Как будто имя = «Джон Смит» и у меня есть предел 6 символов затем
дисплей «джон 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> 

See Fiddle

Answer 2

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

Или вы можете создать вычислен наблюдаемым в вашем ViewModel, например как:

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

Криса Диксона решения идеальны, если у вас есть одно поле с максимальной длиной. Но если вам придется повторять эту операцию несколько раз, она становится громоздкой. То есть, когда вы должны написать собственный наблюдаемый расширитель, как это:

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

Вы можете использовать его на любом наблюдаемом, и вы можете указать другую максимальную длину для любого из них. Это устраняет беспорядок из HTML (решение 1) и необходимость записи вычисленного наблюдаемого (решение 2). Вы просто определить ваш наблюдаемый следующий образ:

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

Answer 4

Если вы хотите усечь значение число i Nput вы могли бы использовать и расширитель, который обрезает значение, как в следующем:

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>