加載貓頭鷹傳送帶2中的動態內容

Question

我有一個帶有2個傳送帶的網頁，其中我必須根據用戶操作顯示不同的項目。

新的數據來自互聯網，我使用fetch，將json解析爲一個數組，這一切都很好。

唯一的問題是我不能讓新項目取代傳送帶中的舊項目。

舉個簡單的例子，我曾嘗試

var carousel = $jq("#owl-genres"); 
for(...) { 
    carousel.owlCarousel() 
     .trigger('add.owl.carousel', [$jq('<div class="item">' + genres[i] + '</div>')]) 
     .trigger('refresh.owl.carousel'); 
} 

但沒有任何反應。儘管這些方法執行並且執行了.trigger，但舊的元素仍然存在。

我也曾嘗試

for(...) { 
    content += '<div class=\'item\'>' + genres[i] + '</div>' 
    carousel.html(content) 
} 
carousel.owlCarousel().trigger('refresh.owl.carousel'); 

這的確增加了新的項目，以旋轉木馬，但現在他們被垂直堆疊，導航不工作，我想整個轉盤壞了。

那麼什麼是正確的方式來更換貓頭鷹旋轉木馬2中的項目？

Answer 1

解基於https://stackoverflow.com/a/37862372/4249825

這些都可以放在接收元件的新的數組，以顯示和儘快取我們新的數據執行的功能。 希望這將幫助其他人（我看到有關於這個問題很多......）

//these 3 lines kill the owl, and returns the markup to the initial state 
carousel.trigger('destroy.owl.carousel'); 
carousel.find('.owl-stage-outer').children().unwrap(); 
carousel.removeClass("owl-center owl-loaded owl-text-select-on"); 

// add the new items 
for (var i = 0; i < genres.length; i++) { 
    content += "<div class=\"item\">" + genres[i] + "</div>" 
} 
carousel.html(content); 

//reinitialize the carousel (call here your method in which you've set specific carousel properties) 
carousel.owlCarousel();