加载猫头鹰传送带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();