0

目标是为每个可能的状态显示过滤的项目列表。我正在尝试一个模板，因为这样的列表可能需要在很多地方显示。该模板调用 filterItems 以获取其特定的项目列表。

下面的 filterItems 代码使用 viewModel 中的一个字段（current_filter），因此所有列表都有相同的项目（3 和 8 处于就绪状态）:( 这不是想法。每个模板实例都有 $data 包含正确的过滤器值。有没有办法使这个过滤器值可用于 filterItems 函数？

<script>
var viewModel = {
items: ko.observableArray(
    [
        { "iid": 1, "state": "entered" },
        { "iid": 3, "state": "ready" },
        { "iid": 4, "state": "delivered" },
        { "iid": 8, "state": "ready" },
        { "iid": 13, "state": "entered" }
    ]),
states: ko.observableArray(
    [
        { "sid": 1, "filter": "entered", "color": "yellow" },
        { "sid": 2, "filter": "ready", "color": "red" },
        { "sid": 3, "filter": "delivered", "color": "blue" }
    ]),
current_filter: 'ready'
}
viewModel.filterItems = ko.computed(function () {
var filtered_items = [];
for (var i = 0; i < viewModel.items().length; ++i)
    if(viewModel.items()[i].state == viewModel.current_filter)
    filtered_items.push(viewModel.items()[i]);
return filtered_items;
}, viewModel);
</script>

<div data-bind="foreach: states">
  <div data-bind="template: {name: 'state', data: $data}"></div>
  <script type="text/html" id="state">
<h2 data-bind="text: filter"></h2>
<ul data-bind="foreach:viewModel.filterItems()">
  <li>
    <div data-bind="text: iid"></div>
  </li>
</ul>
  </script>
</div>
<script>ko.applyBindings(viewModel);</script>

jsFiddle 在https://jsfiddle.net/mthrock/kxpfdfva/8/#&togetherjs=JKJOos6VJc

4

1 回答 1

1

组件而不是模板怎么样？在下面运行代码段

ko.components.register('mycomponent', {
  viewModel: function(params) {
    var self = this;
    this.items = ko.observableArray(
      [{
        "iid": 1,
        "state": "entered"
      }, {
        "iid": 3,
        "state": "ready"
      }, {
        "iid": 4,
        "state": "delivered"
      }, {
        "iid": 8,
        "state": "ready"
      }, {
        "iid": 13,
        "state": "entered"
      }]);
    this.filter = params.filter;

    this.filterItems = ko.computed(function() {
      var filtered_items = [];
      for (var i = 0; i < this.items().length; ++i)
        if (this.items()[i].state == this.filter)
          filtered_items.push(this.items()[i]);
      return filtered_items;
    }, this);


  },
  template: ' <h2 data-bind="text: filter"></h2>\
   <ul data-bind="foreach:filterItems()">\
     <li>\
        <div data-bind="text: iid"></div>\
     </li>\
   </ul>'
});




function model() {
  var self = this;
  this.states = ko.observableArray(
    [{
      "sid": 1,
      "filter": "entered",
      "color": "yellow"
    }, {
      "sid": 2,
      "filter": "ready",
      "color": "red"
    }, {
      "sid": 3,
      "filter": "delivered",
      "color": "blue"
    }]);

}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-bind="foreach: states">
  <mycomponent params="filter: filter"></mycomponent>
</div>

于 2017-07-13T22:25:53.727 回答