knockout.js - 在数据绑定中创建过滤条件：foreach

Question

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

https://jsfiddle.net/zo8ygfk4/111/

<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: "[e-mail]", type: "family" },
        { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", type: "family" },
            { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", type: "family" },
    { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", type: "friend", Type: "1" },
     { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", type: "friend", Type: "1" },
      { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", type: "friend", Type: "1" },
       { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", 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()
)

标签： knockout.js

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: "[e-mail]", type: "family" },
  { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", type: "family" },
  { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", type: "family" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", type: "friend", Type: "1" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", type: "friend", Type: "1" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", type: "friend", Type: "1" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[e-mail]", 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>