Javascript 敲除单击事件可见状态

我是敲除js的新手，在button click事件中发现了一个问题。我有一个列表，其中每个列表项都有一个评论按钮。当我点击按钮时，不可见的评论框应该是可见的。以下是我的HTML代码：

<ul class="unstyled list" data-bind="foreach: filteredItems">
    <li>
        <input type="checkbox" value="true"  data-bind =" attr: { id: id }"  name="checkbox" class="checkbox">
        <label class="checkbox-label" data-bind="text: title, attr: { for: id }"></label>
        <button class="pull-right icon" data-bind="click: loadComment, attr: { id: 'btn_' + id }"><img src="../../../../../Content/images/pencil.png" /></button>
        <div class="description" data-bind="visible: commentVisible, attr: { id : 'item_' + id}">
            <textarea data-bind="value: comment" class="input-block-level" rows="1" placeholder="Comment" name="comment"></textarea>
            <div class="action">
                <button class="accept" data-bind="click: addComment">
                    <img src="../../../../../Content/images/accept.png" /></button>
                <button class="cancel" data-bind="click: cancel">
                    <img src="../../../../../Content/images/cancel.png" /></button>
            </div>
        </div>
    </li>
</ul>

问题是，当我单击loadComment按钮时，每个列表项中的所有注释框都变得可见。我只想让点击按钮的评论框出现

我需要一些帮助

---

谢谢

你的声明对我来说没有多大意义

commentVisible

不是

filteredItems

的属性，因此在执行foreach时，除非使用

$parent

绑定，否则无法访问它

FilteredItems

本身是一个私有变量，不会向viewmodel公开，这会导致绑定失败。我会查看错误控制台，看看是否有任何线索

下面是我所做的一些工作示例（注意，这使用了父绑定，可能不是您想要的）：

淘汰绑定上下文：

您可能想要做的是使用foreach中引用的那些属性创建一个筛选项对象，并用它们填充filteredItems obeservable数组

可能看起来像这样：

var FilteredItem = function(id,title){
    var self = this;    
    self.id = id;
    self.title = title;
    self.commentVisible = ko.observable(false);
    self.comment = ko.observable();
    self.addComment = ko.observable(true);
    self.cancel = function(){
        self.commentVisible(false);
    };    
    self.loadComment = function (item) {
        self.commentVisible(true);
    }
}

var VM = (function() {
    var self = this;
    var item = new FilteredItem(1, 'Test');
    self.filteredItems = ko.observableArray([item]);
    self.filter = ko.observable();
    self.items = ko.observableArray([]);

    return self;
})();

ko.applyBindings(VM);

---

请包括其他相关代码。commentVisible声明很有用，甚至可能是filteredItems的声明。一个显示问题的工作示例最好。@Gary.S我添加了声明。我尝试了JSFIDLE。我又添加了3个列表项，当我单击“加载注释”按钮时，我面临的问题也在那里发生。当我单击“加载注释”按钮时，所有注释字段都将可见。@Mujahid检查我的编辑，我已经解释了这个问题，因为我非常清楚。这正是我要寻找的。

var VM = (function() {
    var self = this;

    self.filteredItems = ko.observableArray([{id: 1, title: 'Test'}]);
    self.filter = ko.observable();
    self.items = ko.observableArray([]);
    self.commentVisible = ko.observable(false);
    self.comment = ko.observable();
    self.addComment = ko.observable(true);
    self.cancel = function(){
        self.commentVisible(false);
    };

    self.loadComment = function (item) {
        self.commentVisible(true);
    }
    return self;
})();

ko.applyBindings(VM);

var FilteredItem = function(id,title){
    var self = this;    
    self.id = id;
    self.title = title;
    self.commentVisible = ko.observable(false);
    self.comment = ko.observable();
    self.addComment = ko.observable(true);
    self.cancel = function(){
        self.commentVisible(false);
    };    
    self.loadComment = function (item) {
        self.commentVisible(true);
    }
}

var VM = (function() {
    var self = this;
    var item = new FilteredItem(1, 'Test');
    self.filteredItems = ko.observableArray([item]);
    self.filter = ko.observable();
    self.items = ko.observableArray([]);

    return self;
})();

ko.applyBindings(VM);