라디오 버튼 선택에 따라 div 요소의 가시성 제어

Question

나는 녹아웃에 비교적 익숙하지 않으며 라디오 버튼 그룹의 선택에 따라 두 div 요소의 가시성을 제어하는 ​​더 좋은 방법이 있는지 궁금해하고있었습니다.

내가 생각해 냈던 것은 다소 연약한 것처럼 보이고 추가 옵션 인 경우이 솔루션은 확장되지 않습니다.

<label>Total</label><input type="radio" name="toggleGraph" value="total" data-bind="checked: toggleGraph" /> 
<label>Growth</label><input type="radio" name="toggleGraph" value="growth" data-bind="checked: toggleGraph" /> 

<div id="total-graph" data-bind="visible: $root.toggleGraph() === 'total'"> 
    Total Graph Here 
</div> 

<div id="growth-graph" data-bind="visible: $root.toggleGraph() === 'growth'"> 
    Growth Graph Here 
</div> 



var ViewModel = function() { 
    var self = this; 
    self.toggleGraph = ko.observable('total'); 
} 

ko.applyBindings(new ViewModel()); 

http://jsfiddle.net/pqzhL/

Answer 1

현재 접근 방식은 괜찮습니다. 선택 사항을 저장하려면 관찰 가능 (toggleGraph)이 필요하며 그 값에 따라 div을 숨기려면 표시 할 수 있습니다.

당신은 total 또는 growth 당신이 계산 된 속성으로의 ViewModel에보기에서 확인 논리를 이동할 수 있습니다 선택하면 로직을 재사용 할 경우

<div id="total-graph" data-bind="visible: isTotalSelected"> 
    Total Graph Here 
</div> 

<div id="growth-graph" data-bind="visible: isGrowthSelected"> 
    Growth Graph Here 
</div> 

var ViewModel = function() { 
    var self = this; 
    self.toggleGraph = ko.observable('total'); 
    self.isTotalSelected = ko.computed(function() { 
     return self.toggleGraph() === 'total' 
    }); 
    self.isGrowthSelected = ko.computed(function() { 
     return self.toggleGraph() === 'growth' 
    }); 
} 

하지만 당신은이 솔루션을 많은 옵션이있는 경우 당신이 도우미 속성을 많이 만들어야하기 때문에 잘 확장되지 않습니다.

또는 선택한 값으로 div ID를 비교하여 몇 가지 규칙 기반 검사를 수행하는 사용자 정의 바인딩 처리기를 만들 수 있습니다

ko.bindingHandlers.visibleIfIdStartsWith = { 
    update: function (element, valueAccessor, allBindingsAccessor, 
         viewModel, bindingContext) { 
     var newAccessor = function() { 
      return element.id.indexOf(valueAccessor()()) === 0; 
     } 
     ko.bindingHandlers.visible.update(element, newAccessor, 
      allBindingsAccessor, viewModel, bindingContext); 
    } 
}; 

은 다음과 같이 사용 :

<div id="total-graph" data-bind="visibleIfIdStartsWith: toggleGraph"> 
    Total Graph Here</div> 
<div id="growth-graph" data-bind="visibleIfIdStartsWith: toggleGraph"> 
    Growth Graph Here</div> 

데모를 JSFiddle.