foreach 내의 텍스트 영역 바인딩 녹아웃 데이터

Question

foreach 내에서 span 태그와 textarea가 있습니다. span 태그를 클릭 할 때마다 텍스트 영역의 가시성을 토글하고 싶습니다.

이것은 내가 현재있는 특정 항목의 텍스트 영역 대신 foreach 내에있는 의 표시 영역을 토글하는 것을 제외하고 부분적으로 작동합니다.

여기 내 코드입니다. 코드는 실제로 실행되지 않지만, 내가하려고하는 것을 볼 수있는 충분한 공간이 있다고 생각합니다.

function MyViewModel(data) { 
 
var self = this; 
 
self.checkListItems = [1,2,3]; 
 
self.textAreaVisible = ko.observable(false); 
 
    
 
self.toggleTextArea = function() { 
 
     self.textAreaVisible(!self.textAreaVisible()); 
 
} 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<div data-bind="foreach: MyViewModel.checkListItems"> 
 
     <span data-bind="click: toggleTextArea">Add Comments ></span> 
 
     <textarea data-bind="value: comments, visible: textAreaVisible"></textarea> 
 
</div>

나는 어쩌면 내가 어떻게 든 $ 데이터를 사용한다처럼 들린다 여기 http://knockoutjs.com/documentation/foreach-binding.html이 링크를 찾았지만, 나는이 상황에서 작동하도록하는 방법을 모르겠어요.

제공할만한 도움에 감사드립니다.

Answer 1

귀하의 체크리스트 항목은 더이 (즉, 객체)과 같아야합니다

self.checkListItems = [ 
    { value: 1, visible: ko.observable(false) }, 
    { value: 2, visible: ko.observable(false) }, 
    { value: 3, visible: ko.observable(false) }, 
]; 

일이 당신이 이런 식으로 반복 할 수 있습니다 :

<div data-bind="foreach: MyViewModel.checkListItems"> 
     <span data-bind="click: function(){ visible(!visible()) }">Add Comments ></span> 
     <textarea data-bind="value: value, visible: visible"></textarea> 
</div> 

당신이 정리에 클릭 처리기를 원하는 경우, 당신을 다음과 같이 뷰 모델을 수정할 수 있습니다.

function MyViewModel(data) { 
//rest of the code 

self.toggleTextArea = function (item) { 
    item.visible(!item.visible()); 
} 
} 

dom을 다음으로 변경하십시오.

<div data-bind="foreach: MyViewModel.checkListItems"> 
      <span data-bind="click: $parent.toggleTextArea">Add Comments ></span> 
      <textarea data-bind="value: value, visible: visible"></textarea> 
    </div> 

Answer 2

루트보기 모델의 속성이므로 textAreaVisible 값이 배열의 모든 항목에 대해 동일하기 때문에 문제는 의도 한 동작과 비슷합니다.

원하는대로 작동하려면 자체 관찰 가능 항목이있는 다른보기 모델이 필요합니다. 따라서 각보기 모델에 ko.observableArray 개의 제어 흐름에 대한 관찰 가능 항목이있는보기 모델을 가질 수 있습니다.

Answer 3

이렇게하는 방법입니다. 숨기고 표시 할 부울은 배열 내부에 놓여 야하므로 각 객체는 보이거나 숨길 자체 부울을가집니다.

function checkListItemViewModel(number) { 
 
    var self = this; 
 
    self.item = ko.observable(number); 
 
    self.comments = ko.observable(""); 
 
    self.isVisible = ko.observable(false); 
 
    self.toggleTextArea = function() { 
 
    self.isVisible(!self.isVisible()); 
 
    } 
 
} 
 

 
function MyViewModel(data) { 
 
    var self = this; 
 
    self.checkListItems = ko.observableArray(); 
 
    for (var i = 0; i<data.length; i++) { 
 
    self.checkListItems.push(new checkListItemViewModel(data[i])); 
 
    } 
 
} 
 
ko.applyBindings(new MyViewModel([1, 2, 3]));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="foreach: checkListItems"> 
 
    <button data-bind="click: toggleTextArea">Add Comments ></button> 
 
    <textarea data-bind="value: comments, visible: isVisible"> 
 
    </textarea> 
 
    <span data-bind="text: comments"></span><br/> 
 
</div>

Answer 4

당신은 당신의 텍스트 영역 모델의 생성자를 만들 수 있습니다. 그것은 지금처럼 모든 텍스트 영역의 가시성을 전환됩니다, https://jsfiddle.net/8n6pghuo/