KnockoutJS observableArray: групповые данные в Еогеасп

Question

Стол с креплениями knockout.js currenlty выглядит LKE это:

source total division 
00234 4506  div1 
30222 456  div2 
63321  23  div2 
40941 189  div1 

требуемый выход будет что-то вроде ниже. Данные необходимо сгруппировать по division.

source total 
div1 
00234 4506 
40941 189 
div2 
30222 456 
63321  23 

Вот мой ViewModel:

var ReportingViewModel; 
ReportingViewModel = { Results: ko.observableArray(null) } 

ReportingViewModel получает заполняется через AJAX запроса:

ReportingViewModel.Results(data["Data"]["Report"]); 

Q: Как можно достичь желаемых результатов?

EDIT:
Вот мой Вид:

 <table class="table table-condensed" id="reportData"> 
      <thead> 
       <tr> 
        <th>source</th> 
        <th>total</th> 
        <th>division</th> 
       </tr> 
      </thead> 
      <tbody data-bind="foreach: Results"> 
       <tr> 
        <td data-bind="text: source"></td> 
        <td data-bind="text: total"></td> 
        <td data-bind="text: division"></td> 
       </tr> 
      </tbody> 
     </table> 

<script type="text/javascript"> 

    $(document).ready(function() { 

      ReportingViewModel.Results(null); 
      e.preventDefault(); 
      var numbers = null; 
      if ($('#numbersdd').find("option:selected").length > 0) { 
       numbers = $('#numbersdd').find("option:selected");} 

      if (numbers != null) { 

        $.ajax({ 
         url: '/Reporting/ReportData.aspx', 
         type: 'POST', 
         data: numbers, 
         dataType: 'json', 
         contentType: "application/json", 
         success: function (data) { 
          ReportingViewModel.Results(data["Data"]["Report"]); 
         }, 
         error: function() { 
          alert('Error Running Report'); 
         } 
        }); 
      } 
      else { alert('No Data!'); } 
     }); 

     var ReportingViewModel; 

     ReportingViewModel = { 
      Results: ko.observableArray(null),    
     } 
     ko.applyBindings(ReportingViewModel); 
    }); 

</script> 

Answer 1

Вот разумная скрипка на группировку данных в Knockout 2.0, которые должны работать для вас.

http://jsfiddle.net/rniemeyer/mXVtN/

Самое главное, что вы должны преобразовывать ваши данные таким образом, у Вас есть свои подразделения в качестве элемента к проходным и каждое подразделение имеет вычисленную ребенка, который возвращает данные соответствия. Он бывает использовать расширение на самый observableArray собственности управлять этим ...

ko.observableArray.fn.distinct = function(prop) { 
    var target = this; 
    target.index = {}; 
    target.index[prop] = ko.observable({});  

    ko.computed(function() { 
     //rebuild index 
     var propIndex = {}; 

     ko.utils.arrayForEach(target(), function(item) { 
      var key = ko.utils.unwrapObservable(item[prop]); 
      if (key) { 
       propIndex[key] = propIndex[key] || []; 
       propIndex[key].push(item);    
      } 
     }); 

     target.index[prop](propIndex); 
    }); 

    return target; 
};  

Затем в разметке только данные привязки к петле через свои подразделения.

Answer 2

Вы можете объявить computed поле, как это:

GroupedResults: ko.computed(function() { 
    var result = {}; 
    var original = ReportingViewModel.Results(); 
    for (var i = 0; i < original.length; i++) { 
     var item = original[i]; 
     result[item.division] = result[item.division] || []; 
     result[item.division].push(item); 
    } 

    return result; 
}) 

Это вычисленное поле будет возвращать объект, как это:

{ 
    div1: [{source: 234, total: 4506, division: 'div1'}] 
    div2: [{source: 30222, total: 456, division: 'div2'}] 
} 

Как вы можете видеть каждое свойство является разделение и содержит массив записей которые связаны с этим разделением.

Затем просто привяжите ваш взгляд к этому новому вычисленному полю.

Если вы хотите создать свой вычислен как часть вашего заявления ReportingViewModel, сделать это следующим образом:

var ReportingViewModel = function(data) { 
    var self = this; 

    self.Results = ko.observableArray(data); 

    self.GroupedResults = ko.computed(...) 
} 

Тогда ваш вызов объекта подобно тому, как сейчас у вас ... но нет.

var reportingViewModel = new ReportingViewModel(data["Data"]["Report"]); 
ko.applyBindings(reportingViewModel);