Observable value update는 바인딩 된 하나의 요소를 변경하지만 다른 요소는 변경하지 않습니다.

Question

내 뷰 모델은 어떤 이유로 인해 하나의 데이터 바인딩 요소 만 업데이트하지만 다른 요소는 업데이트하지 않습니다.

signUpModel.fullNameActive 값 다음은 input에 blur 및 focus 이벤트를 통해 변경 :

<span data-bind="text: signUpModel.fullNameActive"></span> 

이 업데이트되지만 다음

<p class="inputTip" data-bind='visible: signUpModel.fullNameActive'> 
    Enter your first and last name 
</p> 

가 없습니다. 왜 그런가요?

페이지를 처음 열면 작동하지 않는 요소가 표시되고 숨겨진 다음 표시됩니다. 3 번 변경된 것 같습니다. 이 뷰 코드와

var signUpModel = new SignUpModel(); 

    $(document).ready(function() { 
     ko.applyBindings(signUpModel); 
    }); 

    function SignUpModel() {   
     this.userID = ko.observable(""); 
     this.userName = ko.observable(""); 

     this.fullName = ko.observable(""); 
     this.fullNameActive = ko.observable(false); 

     this.sex = ko.observable(""); 
     this.dateOfBirth = ko.observable(""); 
     this.emailAddress = ko.observable(""); 
     this.profileImage = ko.observable(""); 
     this.levelID = 1;  
    } 

는 :

<div class="fieldContainer"> 
    <span data-bind="text: signUpModel.fullNameActive"></span>   
    <input type="text" data-bind="event: {blur: function(){signUpModel.fullNameActive(true)}, focus: function(){signUpModel.fullNameActive(false)} }, value: signUpModel.fullName, valueUpdate: 'afterkeydown'" maxlength="40" id="inputFullName" /> 
    <div class="inputHelp"> 
     <p class="inputTip" data-bind='visible: signUpModel.fullNameActive'> 
      Enter your first and last name</p> 
     <p class="isRequired" data-bind='fadeVisible: signUpModel.fullName().length < 1 || signUpModel.fullName().replace(/\s/g,"") == ""'> 
      Gotta enter something</p> 
     <p class="isGood" data-bind='fadeVisible: signUpModel.fullName().length > 1 && signUpModel.fullName().replace(/\s/g,"") != ""'> 
      This is exciting <span id="personsName" data-bind="text: signUpModel.fullName"></span> 
     </p> 
    </div> 
</div> 

Answer 1

나는 깜박이는 fadeVisible이 사용되는 바인딩을 함께 할 수있는 뭔가가 있다고 생각한다.

ko.bindingHandlers.fadeVisible = { 
    init: function(element, valueAccessor) { 
     $(element).toggle(ko.utils.unwrapObservable(valueAccessor())); 

    }, 
    update: function(element, valueAccessor) { 
     ko.utils.unwrapObservable(valueAccessor()) ? $(element).fadeIn() : $(element).fadeOut(); 
    } 

시도는이 바이올린으로 당신을 조정하기 : http://jsfiddle.net/rniemeyer/f3XMN/

이 두 요소가 fullNameActive의 값에 따라 제대로 업데이트 한 것으로 나타났습니다이 같은

뭔가 간단한 구현 될 것이다.