敲除數據綁定foreach中的textarea

Question

在foreach中，我有一個span標記和一個textarea。每當我點擊span標籤時，我想切換textarea的可見性。

這部分工作，除了它切換在foreach內的textareas的所有的可見性，而不僅僅是針對特定項目的textarea。

這是我的代碼。代碼實際上並沒有運行，但我認爲這裏有足夠的東西讓你看到我正在嘗試做什麼。

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> 

你應該要清理的點擊處理程序，可以修改你的viewmodel如下：

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

您可以爲您的textarea的模型構造。並有自能見度包含的變量，並切換知名度

function TextAreaModel(text){ 
    var self = {}; 
    self.comments = ko.observable(text); 
    self.visible = ko.observable(false); 
    self.toggleVisible = function(){ 
    self.visible(!self.visible()); 
    }; 
    return self; 
} 

function MyViewModel() { 
    var self = {}; 
    self.checkListItems = [ 
     TextAreaModel("This is some text"), 
     TextAreaModel("This is some more text") 
    ]; 
    return self; 
} 

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

工作例如： https://jsfiddle.net/8n6pghuo/