同位素无法与异步结果

您好所有工作的工作，我有这显示在列表（全幅）或网格视图中查看，结果进来异步搜索结果布局，所有产品都可见但略显透明，那么当数据从异步请求进入时，它们需要变得完全不透明并移动到顶端。

我需要动画这些，所以我正在执行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

乐莫，我的回答有帮助吗？ –

同位素无法与异步结果

回答

相关问题