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

如果没有语法的话，请不要使用无容器的语法，它可以完成工作，但您实际上并不需要这样做，它的性能比其他解决方案差很多，并且会弄脏您的dom。您可以尝试使用计算机，当原始数组发生更改时，它将进行自我评估，并且每次仅返回该数组中的族项。

您可以尝试以下操作：

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

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

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

2 个答案: