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

Question

This is for each cycle to display 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 the value of the data attribute is data="people" and display it in another div.

How can i achieve this?

Thanks in advance!

Answer 1

You must have a calculated setup to make everything work

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