アイソトープエラー：ソーターは機能ではありません。アイソトープはソートされていません

Question

私はJquery Isotopeを使用しています。フィルタリングが正常に動作するようですが、私は、ソート機能を追加するとき、私は2つのエラーを取得：ここ

isotope Uncaught TypeError: sorter is not a function 

 と

$().isotope("reLayout") is not a valid method 

は私のHTMLとjQueryのです：

HTML

<select id="sortBy" name="sort"> 
    <option value="pricelowtohigh">Price low to high</option> 
    <option value="pricehightolow">Price high to low</option> 
</select> 


    <li class="block filter-john-doe filter-productname"> 
<a class="page-fade" href="{{ product.url }}"> 
     <div> 
      <h2 class="small">John Doe</h2> 
      <p>Lorem ipsum</p> 
      <p><span class="price" data-price="995">£995</span></p> 
     </div> 
    </a> 
</li> 

JS

$(document).ready(function() { 
    onHashchange(); 

    var $grid = $('.grid').isotope({ 
     itemSelector: '.block', 
     layoutMode: 'fitRows', 
     getSortData: { 
      pricelowtohigh: '[data-price] parseInt', 
      pricehightolow: '[data-price] parseInt', 

     } 
     sortAscending: { 
      pricelowtohigh: true, 
      pricehightolow: false 
     } 
    }); 
    var filters = {}; 

    $('.filter').change(function() { 
     var $this = $(this); 

     var $buttonGroup = $this.parents('.inputGroup'); 
     var filterGroup = $buttonGroup.attr('data-filter-group'); 

     filters[ filterGroup ] = $this.attr('data-filter'); 
     // combine filters 
     var filterValue = concatValues(filters); 
     $grid.isotope({ filter: filterValue }); 
    }); 

    $('#sortBy').change(function() { 
     var sortValue = $(this).val(); 
     $grid.isotope({ sortBy: sortValue }); 
    }); 
}); 

$(window).load(function(){$(".grid").isotope('reLayout');}); 

$(window).on('hashchange', function() { 
     onHashchange(); 

    }); 

    // flatten object by concatting values 
    function concatValues(obj) { 
     var value = ''; 
     for (var prop in obj) { 
      value += obj[ prop ]; 
     } 
     return value; 
    } 

これはなぜですか？ Isotopeはgit hubがバグレポートのためだけであり、これはおそらく私の無知なので、多くのサポートを利用することはできません。

Answer 1

私は配列を最初に宣言していないことに気づきました - sortBy: ['price'] また、昇順と降順の関数を宣言し、最後にsortby関数に直接構文解析する方法を見つけることになりました。 $grid.isotope({ sortBy: 'price', sortAscending: isAscending });

var $grid = $('.grid').isotope({ 
      itemSelector: '.block', 
      layoutMode: 'fitRows', 
      getSortData: { 
       price: '[data-price] parseInt', 
       // pricehightolow: '[data-price] parseInt', 

      }, 
      sortBy: ['price'] 

     }); 

     $('#sortBy').change(function() { 
      var sortValue = $(this).val(); 
      console.log("sortBy "+sortValue); 
      var isAscending = sortValue === 'pricelowtohigh' ? true : false; 
      $grid.isotope({ sortBy: 'price', sortAscending: isAscending }); 
     });