同位素無法與異步結果

您好所有工作的工作，我有這顯示在列表（全幅）或網格視圖中查看，結果進來異步搜索結果佈局，所有產品都可見但略顯透明，那麼當數據從異步請求進入時，它們需要變得完全不透明並移動到頂端。

我需要動畫這些，所以我正在執行Isotope，都有一個數據狀態屬性unavailable。當它們返回，我狀態更改爲returned，然後運行它運行ISOTOP和由data-status（表示返回的第一個），然後在價格順序第一過濾sort方法。

它在靜態數據本地完美工作，但是當我使用異步結果執行到項目中時，它只是不進行排序和過濾。

下面是我實現的輪廓 - 如果任何人都可以看看，看看我做錯了什麼，我將永遠感激。

結果對象概覽：

searchResults = { 

    init: function() { 
     $('#filter').on("change", searchResults.sort); 
    }, 

    getPrice: function (productId, url) { // called elsewhere to load each product 
     $.ajax({ 
      url: url, 
      type: 'GET', 
      success: searchResults.priceReturned 
     }); 
    }, 
    priceReturned: function (data) { 
     var container = $(".product[data-productid='" + data.ProductId + "']"); 

     if (data.Unavailable) { 
      container.addClass('unavailable'); 
      container.find(".failed-notice").html(data.unavailableReason); 
     } else { 
      container.attr("data-status", "returned"); // default is set to unavailable 

      // Process data here 

     } 

     searchResults.sort(); 
    }, 
    sort: function() { 
     var $resultsList = $('.results').isotope({ 
      getSortData: { 
       title: '.title', 
       price: '.price parseInt', 
       returned: '[data-status]' 
      }, 
      sortBy: ['returned', 'price'] 
     }); 
    } 
};

來源

2016-10-11 Le Moi

你可以創建一個jsfiddle？ – Diptox

你是否認爲我在本地工作的解決方案？ –

它是asp.net？ – Diptox

我已經在過去碰到這個問題了。同位素API不太清楚如何處理異步結果。什麼你需要做的是調用layout方法你處理所有的數據後：

priceReturned: function (data) { 
    var container = $(".product[data-productid='" + data.ProductId + "']"); 

    if (data.Unavailable) { 
     container.addClass('unavailable'); 
     container.find(".failed-notice").html(data.unavailableReason); 
    } else { 
     container.attr("data-status", "returned"); // default is set to unavailable 

     // Process data here 

     // Ask Isotope to lay out the new results. 
     $('.results').isotope('layout'); 

    }

你可以閱讀更多關於「佈局」的方法here。

來源

2016-10-18 05:41:41

樂莫，我的回答有幫助嗎？ –

同位素無法與異步結果

回答

相關問題