根據數據屬性如何隱藏在另一個DIV標籤和顯示

Question

這是在每個循環來呈現數據

<ul data-bind="foreach: { data: PersonData, as: 'ref' }"> 
     <li> 
      <a data-bind="attr: { data: ref.Filter }" class="filterbtn"> 
       <span data-bind="html: ref.Name"></span> 
       <span data-bind="text: ref.Age" class="age"></span> 
      </a> 
     </li> 
    </ul> 

我想如果數據屬性值是data="people"隱藏在內部的div顯示它。

我該如何做到這一點？

在此先感謝！

Answer 1

你需要有一個計算的設置，以使事情工作

觀點：

<ul data-bind="foreach: { data: PersonData}"> 
    <li> <a data-bind="attr: { data: Filter },visible:Filter!='people'" class="filterbtn"> 
       <span data-bind="html: Name"></span> 
       <span data-bind="text: Age" class="age"></span> 
      </a> 
    </li> 
</ul> 

<div data-bind="foreach:data"> <span data-bind="html: Name"></span> 
<span data-bind="text: Age" class="age"></span> 
</div> 

視圖模型：

var ViewModel = function() { 
    var self = this; 
    self.PersonData = ko.observableArray([{ 
     'Filter': 'people', 
     'Name': 'cool', 
     'Age': '1' 
    }, { 
     'Filter': 'nope', 
     'Name': 'cooler', 
     'Age': '2' 
    }, { 
     'Filter': 'people', 
     'Name': 'hotter', 
     'Age': '3' 
    }]) 

    self.data = ko.computed(function() { 
     return ko.utils.arrayFilter(self.PersonData(), function (item) { 
      return item.Filter === "people"; //do a case check here(if) 
     }); 
    }); 
}; 

ko.applyBindings(new ViewModel()); 

工作撥弄了here