Knockout.js 删除foreach中绑定textarea的数据

在foreach中，我有一个span标记和一个textarea。每当单击span标记时，我都希望切换textarea的可见性

这部分有效，但它切换foreach中textarea的all的可见性，而不是仅切换我所打开的特定项目的textarea

这是我的密码。代码实际上并没有运行，但我认为有足够的代码让您看到我正在尝试做什么

函数MyViewModel（数据）{
var self=这个；
self.checkListItems=[1,2,3]；
self.textAreaVisible=ko.observable（假）；
self.toggleTextArea=函数（）{
self.textAreaVisible（！self.textAreaVisible（））；
}
}

添加评论>

现在，您的问题更像是预期行为，因为

textAreaVisible

值对于数组中的所有项目都是相同的，因为它是根viewmodel的属性

---

您需要另一个具有自己的可观察对象的viewmodel，以使其按照您的喜好工作，因此您需要一个

ko.observableArray

的viewmodel，其中每个viewmodel都具有用于控制流的可观察对象。

您的清单项目应该更像这样（即对象）：

这样做可以使您进行如下迭代：

<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>

将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>

添加评论>

这就是你要做的。要隐藏和显示的布尔值必须放置在数组中，以便每个对象都有自己的布尔值要显示或隐藏

函数checkListItemViewModel（编号）{
var self=这个；
自身项目=可观察到的ko（数量）；
self.comments=ko.可观察（“”）；
self.isVisible=ko.observable（假）；
self.toggleTextArea=函数（）{
self.isVisible（！self.isVisible（））；
}
}
函数MyViewModel（数据）{
var self=这个；
self.checkListItems=ko.observableArray（）；
对于（var i=0；i

您可以为您的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);

工作示例：

---

您的observable现在将切换所有文本区域的可见性。这是您想要的结果吗？@PimBrouwers不，不是。我希望它只切换当前项目的可见性。因此，如果我单击视图上的第三个跨距，然后在视图上显示第三个文本区域，而不显示其他文本区域。很好，请参见下面的我的答案！愉快的编码！您的代码是错误的。它应该是var self=this；而不是var self={}；如果我使用var self=this，我是故意使用var self={}。我必须说var vm=new MyViewModel（）。TextAreaModel构造函数也是如此。这没有意义。

这类似于
{}
在您声明时。实际上，由于此代码中未使用
new
关键字，
this
将被设置为与
window
相同，而不是新对象。编写的此代码实际上无法与
var self=this；
 <div data-bind="foreach: MyViewModel.checkListItems">
             <span data-bind="click: $parent.toggleTextArea">Add Comments ></span>
             <textarea data-bind="value: value, visible: visible"></textarea>
    </div>

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);