Knockout.js "visible"호출 비동기 함수 - 작동하지 않습니다.

Question

비동기, 약속 등을 이해하려고 노력하고 있었고 기본적인 이해가 있다고 생각하지만 기대했던 결과를 얻지 못했습니다.

나는 다음 더불어, HTML 테이블이 :

<table data-bind="visible: viewPrincipal()"> 

viewPrincipal() true 또는 false를 돌려 함수입니다. viewPrincipal()이 false를 반환하거나 true를 반환하는 경우 가장 기본적인 수준에서 작동합니다. 하지만 내가 뭘하려고하는지 비동기 함수를 호출하여 true 또는 false 값을 가져옵니다.

function viewPrincipal() { 
    console.log("Seeing if person is in principal group"); 
    return IsCurrentUserMemberOfGroup("Principal Members", function (isCurrentUserInGroup) { 
    console.log(isCurrentUserInGroup); 
    return isCurrentUserInGroup; 
    }); 
} 

console.log가 작동하며 예상대로 true 또는 false를 반환합니다. 하지만 부모의 viewPrincipal() 함수가 true 또는 false 값을 반환하도록하고 싶습니다. 결과는 "undefined"입니다.

왜 이런 일이 벌어지고 있는지 이해합니다. IsCurrentUserMemberOfGroup() 함수를 완료하는 데 약간의 시간이 걸리지 만 해결 방법을 모르겠습니다. 함수를 함께 연결하는 방법을 알고 있지만 knockout.js와 같은 것을 사용하여 테이블을 표시할지 여부를 결정할 때 체인 연결 방법을 모르겠습니다.

아무도 도와 줄 수 있습니까?

Answer 1

내가 오전 당신의 접근 방식과 손실 비트,하지만 난 수 있도록 노력하겠습니다.

먼저 클라이언트 측에서 액세스 제어를 구현할지 여부를 두 번 생각해보십시오. 사용자에게 충분한 권리가없는 경우 단순히 요소를 숨기면 민감한 콘텐츠가 여전히 DOM에 남아 있고 다운로드 된 상태이므로 표시하지 않는 것처럼 위험 할 수 있습니다. 뉴비 해커조차도 해커를 보여줄 수있는 방법을 찾아 낼 수 있습니다. F12 도구를 사용하여 간단히 볼 수 있습니다.

둘째로, 함수의 3 중 임베딩이 실제로 필요합니까? 함수를 호출하는 가장 바깥 쪽 함수가 있으며,이 함수는 제공된 콜백을 호출합니다. 보기에 다음

function viewModel() { 
    var self = this; 

    var serverData = ko.observable(null); 
    this.viewPrincipal = ko.computed(function() { 
     var srvDataUnwrapped = serverData(); // access the inner value 

     if (!srvDataUnwrapped) { 
      return false; 
     } 

     // Do your decision logic here... 

     // return false by default 
     return false; 
    }); 

    // Load the permission details from the server, this will set 
    // a variable that the viewPrincipal depends on, this will allow 
    // Knockout to use its dependency tracking magic and listen for changes. 
    (function() { 
     $.ajax(url, { 
      // other config 
      success: function (data) { 
       serverData(data); 
      } 
     ); 
    })(); 
}; 

var vm = new viewModel(); 

과 : 당신은 computed observables를 사용하여이를 취소 할 수

<table data-bind="visible: viewPrincipal"> 

참고 여기 () 년대, 그것은 녹아웃 사용하는 방법을 알 수 있도록 observable 경우 부족 그것.이것이 당신의 기존 코드에 추가 할 지나치게 복잡한 것 같으면

, 당신은 단순히 대신 observable을 정의하고 콜백 내부에 그 값을 설정할 수 있습니다 :이 방법으로

function viewModel() { 
    // other stuff ... 
    this.viewPrincipal = ko.observable(false); 

    // Call this wherever it fits your requirements, perhaps in an init function. 
    function checkPrincipal() { 
     IsCurrentUserMemberOfGroup("Principal Members", function (isCurrentUserInGroup) { 
      viewPrincipal(isCurrentUserInGroup); 
     }); 
    }; 
}; 

를, 마크 업는 것 괄호없이 이전, 즉과 동일 할 : 이런 식으로 수행

<table data-bind="visible: viewPrincipal"> 

단순히 콜백 Y 내부에 관찰의 내부 값을 설정하는 것 ou는 IsCurrentUserMemberOfGroup으로, Knockout은 observable의 변경 내용을 추적 할 수 있기 때문에 값 변경이 UI에 반영됩니다.

희망이 있습니다.

Answer 2

가장 좋은 방법은 관측 할 수있는 bool을 사용하고 a-sync 함수가 값을 변경하도록하는 것입니다. 양방향 바인딩의 마술은 나머지를 맡기십시오.

예 : JSFIDDLE

function vm() { 
    this.viewPrincipal = ko.observable(false); 
}; 

var vm = new vm(); 
ko.applyBindings(vm); 

function fakeAsync() { 
    setTimeout(() => { 
     vm.viewPrincipal(true); 
    }, 1500); 
} 
fakeAsync();