javascript - ノックアウト クリック イベントの可視状態

Question

Knockout js は初めてで、ボタン クリック イベントに問題が見つかりました。各リスト項目にコメント用のボタンがあるリストがあります。ボタンをクリックすると、非表示のコメント ボックスが表示されるはずです。以下は私の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とコメントが表示されるはずだと述べました

var filteredItems = ko.observableArray([]),
    filter = ko.observable(),
    items = ko.observableArray([]),
    self = this;

self.commentVisible = ko.observable(false);
self.comment = ko.observable();
self.addComment = ko.observable(true);
self.cancel = ko.observable();

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

問題は、loadComment ボタンをクリックすると、各リスト項目のすべてのコメント ボックスが表示されることです。クリックしたボタンのコメントボックスだけを表示させたい。

助けが要る。

ありがとう