홈>2020-03-18 17:48

knockout.js - 익스텐더를 동적으로 리 바인드해도 뷰가 업데이트되지 않습니다

대상의 최소/최대 길이를 확인하는 익스텐더가 있습니다. 드롭 다운 선택에 따라 최소/최대를 동적으로 설정해야합니다. 최소값/최대 값이 범위를 벗어나면 관측 가능 값은 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() } "/>

knockout.js

답변 # 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>

Python2.net

knockout.js - 익스텐더를 동적으로 리 바인드해도 뷰가 업데이트되지 않습니다

관련 자료