Depending on data attribute how to Hide the tag and display in another div

Question

This is the for each loop to render the data

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

I want to hide if data attribute value is data="people" and display it in another div.

How can I achieve this?

Thanks in advance!

Answer 1

You need to have a computed setup to make things working

view:

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

viewModel:

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

working fiddle up here