녹아웃은 클릭시 활성 클래스를 토글합니다

Question

나는 녹아웃 앱을 가지고 있고 그 안에는 선택한 옵션에 따라 페이지의 요소를 표시하거나 숨기는 기능이 있습니다. 특정 토글을 활성화하기 위해 선택된 버튼은 '활성'클래스를 가지므로 다른 것들과 '돋보이게'되며 선택된 옵션임을 분명히 알 수 있습니다. 내 문제는 내가 활성화 된 클래스를 전환 할 녹아웃 함수를 만들었지 만 활성 상태를 트리거하는 모든 단추가 아닌 선택한 단추 및 왜 확실하지?

var viewModel = function(){ 
    var self = this; 
    self.isActive = ko.observable(false); 
    self.toggleActive = function(data, event){ 
     self.isActive(!self.isActive()); //toggle the isActive value between true/false 
    } 
} 

<button data-bind="click: toggleActive, css : {'activeStyle' : isActive}">Toggle Active</button> 
<button data-bind="click: toggleActive, css : {'activeStyle' : isActive}">Toggle Active</button> 
<button data-bind="click: toggleActive, css : {'activeStyle' : isActive}">Toggle Active</button> 

바이올린 : http://jsfiddle.net/amMup/5/

Answer 1

에만 세 개의 버튼에 대해 하나의 뷰 모델이있다. 즉, 모든 버튼이 바인딩되는 단일 "isActive"플래그 만 있습니다.

대신 각 항목을 렌더링하려면 foreach 루프와 항목 배열을 사용하십시오. 다음은 뷰 모델의 불통 버전입니다 :

var viewModel = function(){ 
    var self = this; 
    self.items = [ 
     { isActive: ko.observable(false) }, 
     { isActive: ko.observable(false) }, 
     { isActive: ko.observable(false) } 
     ]; 
    self.toggleActive = function(data, event){ 
     data.isActive(!data.isActive());//toggle the isActive value between true/false 
    } 
} 

var myModel = new viewModel(); 

ko.applyBindings(myModel); 

가 그리고 HTML이 단순화 :

<div data-bind="foreach: items"> 
    <button data-bind="click: $parent.toggleActive, css : {'activeStyle' : isActive}">Toggle Active</button> 
</div> 

주 $parent의 사용에 액세스 할 부모의 binding context. foreach 루프 안에있을 때 바인딩 컨텍스트는 foreach 루프에서 가져온 개별 항목입니다. $parent에 액세스하면 items 속성이 들어있는 객체에 도달합니다. 사용자의 경우 toggleActive이있는 뷰 모델입니다. 당신이 그들 모두 같은 관측에 바인딩이 있기 때문에 http://jsfiddle.net/psteele/amMup/6/

Answer 2

이것은 :

여기에 업데이트 된 바이올린입니다.

http://jsfiddle.net/Kohan/fdzqJ/

JS

var viewModel = function(){ 
    var self = this; 
    self.isActive1 = ko.observable(false); 
    self.isActive2 = ko.observable(false); 
    self.isActive3 = ko.observable(false); 

    self.toggleActive = function(data){ 
     data(!data()); 
    } 
} 

var myModel = new viewModel(); 

ko.applyBindings(myModel); 

당신이 jQuery를 태그 한 이후, 당신은 jQuery의 toggleClass 기능을 사용하여 고려할 수 있습니다

<button data-bind="click: function(){toggleActive(isActive1)}, css : {'activeStyle' : isActive1}">Toggle Active</button> 
<button data-bind="click: function(){toggleActive(isActive2)}, css : {'activeStyle' : isActive2}">Toggle Active</button> 
<button data-bind="click: function(){toggleActive(isActive3)}, css : {'activeStyle' : isActive3}">Toggle Active</button>