在数据绑定中创建过滤条件：foreach

Question

是否可以在 foreach 中创建一个过滤器。我的目标是显示来自 ko.obervableArray 的特定数据。在我在 JS Fiddle 上创建的示例中，我的目标是仅显示 type="family".

<table>
    <thead>
    <tr><th>name</th><th>address</th><th>Type</th></tr>
    </thead>
    <tbody id="sample" data-bind="foreach: items">
    <!-- ko: type === 'family' -->
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: address"></td>
            <td data-bind="text: type"></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>


var people = [
    { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
        { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
            { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
    { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend", Type: "1" },
     { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend", Type: "1" },
      { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend", Type: "1" },
       { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend", Type: "1" },
];


var quotesarray = function(){
var self=this;
    self.items = ko.observableArray();

      window.setInterval(function(){
      self.items.removeAll();
        ko.utils.arrayPushAll(self.items, people)
    },1000);


};


ko.applyBindings(new quotesarray()
)

Answer 1

您的 HTML 代码中有错字："ko: type === 'family'" 必须替换为 "ko if: type === 'family'"

var people = [
  { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
  { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
  { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend", Type: "1" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend", Type: "1" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend", Type: "1" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend", Type: "1" },
];


var quotesarray = function(){
var self=this;
    self.items = ko.observableArray();

      window.setInterval(function(){
      self.items.removeAll();
        ko.utils.arrayPushAll(self.items, people)
    },1000);


};


ko.applyBindings(new quotesarray()
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
    <thead>
    <tr><th>name</th><th>address</th><th>Type</th></tr>
    </thead>
    <tbody id="sample" data-bind="foreach: items">
    <!-- ko if: type === 'family' -->
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: address"></td>
            <td data-bind="text: type"></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>

Answer 2

不要为这个小东西使用无容器 if 语法，它可能会完成工作，但你真的不需要这样做，它的性能比其他解决方案差得多并且它让你 dom肮脏的。您可以尝试使用计算的，它会在原始数组更改时自行评估，并且每次 return 只会 return 该数组中的家庭项目

您可以尝试以下方法：

self.familyItems = ko.pureComputed(function(){
    return self.items().filter(function(i){ return i.type === 'family'})
});

然后将您的 foreach 绑定到 familyItems 而不是 items

在数据绑定中创建过滤条件：foreach

Create Filter condition inside data-bind: foreach

knockout.js