Knockout.js KnockoutJS-同位素排序

我试图显示一个产品列表，并使用同位素对其进行分类。问题是，sort函数不执行任何操作，也不返回任何错误。此外，overflow:hidden应用于除第一个产品外的所有产品

JsFiddle：

JS:

var$container=$（'#phoneCatalog container'）。同位素({
itemSelector:“.phoneCatalog项”，
getSortData：{
价格：功能（$elem）{
返回$elem.find（'.phoneCatalog Price'）.text（）；
}
}
});
$（'.target'）。在（'click'，'button'，函数（）{
$container.com({
糟糕的是：价格
});
});
功能项（phoneID、phoneMake、phoneModel、phoneAlias、price）{
这._phoneID=ko.可观察（phoneID）；
this.phoneMake=ko.可观察（phoneMake）；
this.phoneModel=ko.observable（phoneModel）；
this.phoneAlias=ko.observable（phoneAlias）；
this.price=ko.observable（Math.floor（Math.random（）*16）+5）；
this.displayName=ko.computed（函数（）{
返回此.phoneMake（）+“”+此.phoneModel（）；
}，这个）；
}
//行星列表的动画回调
this.showPhoneElement=函数（elem）{
if（elem.nodeType==1）$（elem.hide（）.fadeIn（700）
}
this.hidePhoneElement=函数（elem）{
if（elem.nodeType==1）$（elem.fadeIn（“fast”），函数（）{
$（elem）.remove（）；
})
}
sortBy=函数（字段）{
console.log（字段）
this.filtereditems.sort（函数（a，b）{
返回a[field]

表示将单击事件附加到任何具有t的元素的所有按钮后代

  var $container = $('#phoneCatalog-Container').isotope({
      itemSelector: '.phoneCatalog-Item',
      getSortData: {
          price: function ($elem) {
              return $elem.find('.phoneCatalog-Price').text();
          }
      }
  });

  $('.target').on('click', 'button', function () {
      $container.isotope({
          sortBy: price
      });
  });



  function Item(phoneID, phoneMake, phoneModel, phoneAlias, price) {
      this._phoneID = ko.observable(phoneID);
      this.phoneMake = ko.observable(phoneMake);
      this.phoneModel = ko.observable(phoneModel);
      this.phoneAlias = ko.observable(phoneAlias);
      this.price = ko.observable(Math.floor(Math.random() * 16) + 5);

      this.displayName = ko.computed(function () {
          return this.phoneMake() + " " + this.phoneModel();
      }, this);

  }
  // Animation callbacks for the planets list
  this.showPhoneElement = function (elem) {
      if (elem.nodeType === 1) $(elem).hide().fadeIn(700)
  }
  this.hidePhoneElement = function (elem) {
      if (elem.nodeType === 1) $(elem).fadeIn("fast", function () {
          $(elem).remove();
      })
  }


  sortBy = function (field) {
      console.log(field)
      this.filtereditems.sort(function (a, b) {
          return a[field] < b[field] ? -1 : 1;
      });
  };


  var viewModel = {
      items: ko.observableArray([]),
      selectedfilter: ko.observable(""),
      selectedBrand: ko.observable(""),
      selectedIndex: ko.observable(""),
      pageSize: ko.observable(3),
      pageIndex: ko.observable(0)

  };




  viewModel.filteredItems = ko.computed(function () {
      var filter = this.selectedfilter().toLowerCase();
      if (!filter) {
          var t = this.selectedBrand().toLowerCase();
          if (!t || t == "all") return this.items();
          return ko.utils.arrayFilter(this.items(), function (item) {
              return item.phoneMake().toLowerCase() == t;
          });
      }

  }, viewModel);

  viewModel.optionSelector = function (selector, data) {
      //option = selector;

      switch (selector) {
          case "brand":
              this.selectedfilter("");
              this.selectedIndex("");
              this.selectedBrand(data);
              break;
          case "index":
              this.selectedfilter("");
              this.selectedBrand("");
              this.selectedIndex(data);
              break;
          default:
              this.selectedfilter("");
              this.selectedIndex("");
              this.selectedBrand("all");
              break;
      }
  };


  var JSONdataFromServer = '[{"phoneID":"54a7a00bc6164c14deed643d","phoneMake":"Samsung","phoneModel":"x200","phoneAlias":"BuggyMorph","price":200},{"phoneID":"54a7a00b8d6650941f5a405f","phoneMake":"Nokia","phoneModel":"M592","phoneAlias":"BuggyMorph","price":300},{"phoneID":"54a7a00b4b93f209cabbdd33","phoneMake":"Motorola","phoneModel":"XT2042","phoneAlias":"BuggyMorph","price":300},{"phoneID":"54a7a00b3dec0d20713f8ca0","phoneMake":"LG","phoneModel":"XT2042","phoneAlias":"BeastlyPhone","price":300},{"phoneID":"54a7a00b69cca65ce8bf50ef","phoneMake":"Motorola","phoneModel":"x100","phoneAlias":"Triton","price":200},{"phoneID":"54a7a00baa7f43c455c07538","phoneMake":"Lenovo","phoneModel":"XT2042","phoneAlias":"BuggyMorph","price":200},{"phoneID":"54a7a00bd6ce0b095fd20ee4","phoneMake":"Motorola","phoneModel":"XT2042","phoneAlias":"BeastlyPhone","price":200},{"phoneID":"54a7a00bdde7b4ebb27d5e2f","phoneMake":"LG","phoneModel":"x200","phoneAlias":"BeastlyPhone","price":300},{"phoneID":"54a7a00b4eb0e09c9b47b64a","phoneMake":"Alcatel","phoneModel":"x100","phoneAlias":"BeastlyPhone","price":100},{"phoneID":"54a7a00bce4e8ea2e3936b55","phoneMake":"Apple","phoneModel":"x200","phoneAlias":"BeastlyPhone","price":200},{"phoneID":"54a7a00be1848cc46c3ee7c9","phoneMake":"Apple","phoneModel":"XT2042","phoneAlias":"BeastlyPhone","price":200},{"phoneID":"54a7a00b87ee74aa7b25e708","phoneMake":"LG","phoneModel":"x100","phoneAlias":"BuggyMorph","price":200},{"phoneID":"54a7a00b1f69852c1ba84ea5","phoneMake":"Samsung","phoneModel":"M592","phoneAlias":"Triton","price":300},{"phoneID":"54a7a00b4677c54e38af8d81","phoneMake":"Apple","phoneModel":"XT2042","phoneAlias":"Triton","price":200},{"phoneID":"54a7a00b0d2524cf57688eda","phoneMake":"Lenovo","phoneModel":"x100","phoneAlias":"BeastlyPhone","price":100}]';

  var dataFromServer = ko.utils.parseJson(JSONdataFromServer);

  //do some basic mapping (without mapping plugin)


  //     $.getJSON("/json/getPhoneCatalog", function (data) {
  //       var mappedData = ko.utils.arrayMap(data, function (item) {
  //          return new Item(item._phoneID, item.phoneMake, item.phoneModel, item.phoneAlias, item.price);
  //      });
  //        viewModel.items(mappedData);



  var dataFromServer = ko.utils.parseJson(JSONdataFromServer);

  //do some basic mapping (without mapping plugin)
  var mappedData = ko.utils.arrayMap(dataFromServer, function (item) {
      return new Item(item.phoneID, item.phoneMake, item.phoneModel, item.phoneAlias, item.price);
  });


  viewModel.items(mappedData);

<div class='liveExample'> <span data-bind='text: filteredItems().length'>&nbsp;</span>

    <section> <strong>Filter: </strong>

        <input id="search" data-bind="value: selectedfilter, valueUpdate: 'afterkeydown'" />
    </section>
    <section id="Brand"> <strong>By Brand: </strong>
 <a href="#all" data-bind='click: function() {optionSelector("brand", "all")}'>All</a>
 <a href="#Apple" data-bind='click: function() {optionSelector("brand", "Apple")}'>Apple</a>
 <a href="#Samsung" data-bind='click: function() {optionSelector("brand", "Samsung")}'>Samsung</a>

    </section>
    <button class="target" data-sort-by="price">Sort by price</button>
    <div>
        <div id="phoneCatalog-Container" data-bind="template: {
                               foreach: filteredItems,
                               beforeRemove: hidePhoneElement,
                               afterAdd: showPhoneElement }" class="phoneCatalog-Item"> <span data-bind="text: phoneMake"></span>
 <span data-bind="text: phoneModel"> </span>
 <span data-bind="text:  '$' + price()" class="phoneCatalog-Price"> </span>

            <br />
        </div>
    </div>
</div>

<div id="phoneCatalog-Container" data-bind="...">
  <div class="phoneCatalog-Item">
    <span>...
  </div>
</div>