Question

我想使用knockout js对数据进行分组。我这样做了小提琴。

但是当我将字符作为可观察数组（http://jsfiddle.net/Naidu526/Z2gXv/12/）给出内容时没有显示。我可以告诉我可能的问题。

HTML：

<div data-bind="
groupby: { 
    group: Characters,
    by: function (character) { return character.year; },
    sort: 'descending'
}">
<div class="species">      
    <b data-bind="text: $key"></b><span data-bind="text: '('+ $data.length + ')'"></span> 

    <div class="characters" data-bind="
groupby: { 
    group: $data,
    by: function (mth) { return mth.month; },
    sort: 'descending'
}">
    <b data-bind="text: $key"></b><b data-bind="text:'('+ $data.length + ')'"></b>
        <!-- Iterate through the group using foreach as normal. -->
        <ul data-bind="foreach: $data">
            <li data-bind="text: module"></li>
        </ul>
    </div>
    <hr />
</div>

JS：

ko.bindingHandlers.groupby = {
makeTemplateValueAccessor: function(valueAccessor) {
  var bindingValue, groupedArrays, groups, key, keys, obj, objectsInGroup, _i, _j, _len, _len1, _ref,
    _this = this;
  bindingValue = ko.utils.unwrapObservable(valueAccessor());
  groups = {};
  _ref = bindingValue.group;
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    obj = _ref[_i];
    key = bindingValue.by(obj);
    if (groups[key] === void 0) {
      groups[key] = [obj];
    } else {
      groups[key].push(obj);
    }
  }
  keys = (function() {
    var _results;
    _results = [];
    for (key in groups) {
      _results.push(key);
    }
    return _results;
  })();
  if (typeof bindingValue.sort === 'function') {
    keys.sort(bindingValue.sort);
  } else if (typeof bindingValue.sort === 'string') {
    if (bindingValue.sort === 'ascending') {
      keys.sort();
    } else if (bindingValue.sort === 'descending') {
      keys.sort();
      keys.reverse();
    }
  }
  groupedArrays = [];
  for (_j = 0, _len1 = keys.length; _j < _len1; _j++) {
    key = keys[_j];
    objectsInGroup = groups[key];
    objectsInGroup.$key = key;
    groupedArrays.push(objectsInGroup);
  }
  return function() {
    return {
      foreach: groupedArrays,
      templateEngine: ko.nativeTemplateEngine.instance
    };
  };
},
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
  return ko.bindingHandlers.template.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
  var newValueAccessor;
  newValueAccessor = ko.bindingHandlers.groupby.makeTemplateValueAccessor(valueAccessor);
  return ko.bindingHandlers.template.update(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);
}
};

var Model = {
this.Characters = ko.observableArray([
    {
        'year': "2014",
        'month': "july",
        'module':'tour'
    },
    {
        'year': "2014",
        'month': "july",
        'module':'action'
    },
      {
        'year': "2014",
        'month': "june",
        'module':'duplicate'
    },
    {
        'year': "2013",
        'month': "june",
        'module':'note'
    },
    {
        'year': "2015",
        'month': "july",
        'module':'contact'
    },
    {
        'year': "2013",
        'month': "may",
        'module':'contact'
    }
]);
};

ko.applyBindings(Model);

Answer 1

有很多问题，比如Viewmodel对象因为“=”而不是“：”而具有无效属性，那么属性以perenthesis结束。

另一个问题是Groupby自定义绑定期望的数组，并且您正在传递observableArray。

<div data-bind="
  groupby: { 
    group: Characters(),//Pass Array
    by: function (character) { return character.year; },
    sort: 'descending'
}">

Fiddle Demo

如何使用knockout js对数据进行分组

1 个答案: