dat.gui의 체크 박스를 선택 취소하십시오.

Question

드롭 다운 메뉴의 옵션을 변경하면 모든 체크 박스를 선택 해제해야합니다. 다음은 드롭 다운 메뉴가 변경 될 때 호출되는 함수 안에 넣은 코드입니다.

var inputs = document.getElementsByTagName("input"); 
for(var i = 0; i < inputs.length; i++) { 
     if(inputs[i].type == "checkbox") { 
     inputs[i].checked = false; 
    } 
} 

실제로이 확인란의 선택을 취소합니다. 그러나 체크 박스를 다시 확인하려면 두 번의 클릭이 필요합니다. dat.gui는 여전히 체크 박스가 체크 된 것으로 생각하므로, 체크하지 않으려면 한 번 클릭하고 체크하려면 한 번 클릭하십시오.

dat.gui를 체크 박스로 업데이트하려면 어떻게해야합니까?

편집 : 여기에 문제의 현재 상태가 있습니다.

gui = new dat.GUI; 
controllers = []; 

var menu = { 
    'This is an example': false, 
} 

controllers[0] = gui.add(menu, 'This is an example').onFinishChange(
    function(value) {console.log('example');}).listen(); 

menu['This is an example'] = false; 

이 코드를 사용하면 .listen() 호출 및 변수를 false로 설정하기 때문에이 확인란의 선택이 취소됩니다. 그러나 체크가 표시 되려면 두 번 클릭해야합니다. 하나는 체크 박스를 선택 취소하고 다른 하나는 체크합니다. dat.gui을 말함으로써 바인딩

Answer 1

먼저 설정 데이터 dat.gui 체크 박스를 통해 제어되는 것을 당신이

gui = new dat.GUI; 
controllers = []; 

var menu = { 
    'This is an example': false, 
} 

controllers[0] = gui 
    .add(menu, 'This is an example') 
    .listen() 
    .onFinishChange(
     function(value) { 
      console.log('example'); 
     } 
    ); 

.add()이 그런 다음 변수를 설정하여 후 .listen()을 포함하여 결합하는 데 필요한 값을 듣 거짓으로.

menu['This is an example'] = false; 

dat.gui의 세부 사항에 대한 몇 가지 추가 정보를 원하시면 : 나는 최근에 적절한 동작을 얻기 위해 두 번 체크 박스를 클릭 할 필요와 같은 문제를 가로 질러 왔어요 http://dat-gui.googlecode.com/git-history/561b4a1411ed13b37be8ff974174d46b1c09e843/index.html

Answer 2

, 그래서 여기에 근무 무엇 나와 다른 사람이 몇 분 동안 머리를 긁적 거리지 않도록 희망적으로 보냅니다.

// the usual 
var menu = { "foo":false }; 

// store this reference somewhere reasonable or just look it up in 
// __controllers or __folders like other examples show 
var o = menu.add(menu, "foo").onChange(function() { }); 

// some later time you manually update 
o.updateDisplay(); 
o.__prev = o.__checkbox.checked;