>

대상의 최소/최대 길이를 확인하는 익스텐더가 있습니다. 드롭 다운 선택에 따라 최소/최대를 동적으로 설정해야합니다. 최소값/최대 값이 범위를 벗어나면 관측 가능 값은 hasError 입니다. , 그러면 CSS 클래스로 내 견해가 업데이트됩니다. 문제는 익스텐더를 리 바인드하면 뷰가 업데이트되지 않습니다. 여기 내 익스텐더가 있습니다 :

ko.extenders.minmaxlength = function (target, options) {
    target.min = ko.observable(options.min);
    target.max = ko.observable(options.max);
    target.hasError = ko.observable(false);
    function validate(newValue) {      
        if (newValue.length > options.max || newValue.length < options.min){
            target.hasError(true);            
        } else {
            target.hasError(false);       
        }    
    }
    validate(target());
    target.subscribe(validate);    
};

여기서 바인딩 및 리 바인드 익스텐더를 리 바인드합니다 :

self.newValue = ko.observable('').extend({ minmaxlength: { min: 3, max: 30 } }); // defaults
self.selectedType.subscribe(function (newValue) {
    if (newValue == undefined) {
        return;
    }
    var obj = self.pricingTypes().filter(function (i) {
        return i.Id == newValue;
    });
    if (obj.length > 0) {
        var objType = obj[0];
        self.selectedTypeObj(ko.mapping.fromJS(objType));  
        // rebind the extender here
        self.newValue = ko.observable('').extend({ minmaxlength: { min: self.selectedTypeObj().MinLength(), max: self.selectedTypeObj().MaxLength() } });
        self.newValue.valueHasMutated()
    } else {
        return; // bad value
    }
});

디버그 할 때 익스텐더가 호출되고 hasError 를 설정하는 것을 볼 수 있습니다  제대로 작동하지만 다시보기가 업데이트되지 않습니다.

입력은 다음과 같습니다 :

   <input class="form-control" data-bind="textInput: $root.newValue, css: { 'requiredField': $root.newValue.hasError() } "/>

  • 답변 # 1

    런타임에 KO 익스텐더의 값을 변경할 수 있다고 생각하지 않습니다. 그러나 전에는 그런 적이 없었으므로 익스텐더에 옵저버 블을 전달한 다음 .subscribe() 에서 옵저버 블 값을 변경하려고했습니다.  콜백이지만 운은 없습니다.

    대신 계산을 사용하는 것이 좋습니다. 보기 모델에 필요한 모든 값에 액세스 할 수있는 것 같습니다.

    function TestViewModel() {
      var self = this;
      self.minLength = ko.observable(3); // default min
      self.maxLength = ko.observable(30); // default max
      self.newValue = ko.observable(null);
      self.newValueIsValid = ko.pureComputed(function() {
        if (!self.newValue()) {
          return;
        }
        if (self.newValue().length > self.maxLength() || self.newValue().length < self.minLength()) {
          console.log("invalid");
          return false;
        } else {
          console.log("valid");
          return true;
        }
      });
      self.selectedType = ko.observable("default value");
      self.selectedType.subscribe(function(newValue) {
        self.minLength(5); // new min
        self.maxLength(50); // new max
      });
    }
    var vm = new TestViewModel();
    ko.applyBindings(vm);
    vm.newValue("test");
    vm.newValueIsValid(); // should be valid with default min/max
    vm.newValue("something really too long to be valid");
    vm.newValueIsValid(); // should be invalid with default min/max
    vm.selectedType("changed value");
    vm.newValue("test");
    vm.newValueIsValid(); // should be invalid with new min/max
    vm.newValue("something really too long to be valid");
    vm.newValueIsValid(); // should be valid with new min/max
    
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    
    

관련 자료

  • 이전 c# : Origin 데이터 소스를 System.Windows.Clipboard로 가져옵니다.
  • 다음 rust - Hyper에서 사용하기 위해 사용자 지정 유형 헤더를 어떻게 구현할 수 있습니까?