根據數據屬性，如何隱藏標記並在另一個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());

在這里工作小提琴