敲除單擊事件可見狀態

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按鈕，所有的評論每個列表項目中的框都可見。我只想讓只有點擊按鈕的評論框出現。

需要一些幫助。

謝謝

Answer 1

你的聲明對我沒什麼意義。 commentVisible不是filteredItems的屬性，所以在執行foreach時，除非使用$parent綁定，否則它將無法訪問。 FilteredItems本身是一個私有變量，不會暴露給viewmodel，並且會導致綁定失敗。我會看錯誤控制檯，看看是否有任何線索。

這裏是我做過什麼，使一個有些工作示​​例（注意其中用到父約束力，可能不是你所去爲）：

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

http://jsfiddle.net/infiniteloops/z93rN/

淘汰賽結合上下文：http://knockoutjs.com/documentation/binding-context.html

你可能想要做的是創建一個過濾的項目對象與那些在foreach中引用的屬性，並填充fi lteredItems 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); 

http://jsfiddle.net/infiniteloops/z93rN/2/