根据数据属性,如何隐藏标记并在另一个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());

在这里工作小提琴