敲除数据绑定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/