녹아웃 : 관찰 가능 필드의 문자 수 제한

Question

녹아웃 뷰 모델에 관찰 가능한 이름 필드가 있습니다. 이제 특정 숫자를 초과하는 경우이 필드의 문자 수를 제한하려고합니다.

이름 = "존 스미스"경우로

그리고 난 다음 6 자로 제한
디스플레이가 "존들 ..."

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 당신을 적용하여 HTML에

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

: 관찰에 확장을 추가합니다 그 뜻을 사용자 지정 바인딩을 생성 한 후

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

     return target; 
    }; 

그리고 : nput 당신이 사용할 수 있고 확장 다음과 같이 값을자를 것

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