У меня есть небольшой проект, над которым я работаю, и я впервые использую KnockoutJS (и давно, когда я использовал javascript).
Любая карусель javascript работает с foreach, до тех пор, пока массив не будет обновлен.Я уже пробовал использовать плагины Glider, Slick и Owl, и все они в итоге делают одно и то же:
- Документ запускается, foreach инициирует, заполняет карусель картами, извлеченными из URL.ОК
- Используя
<select>, я изменяю параметр, который будет возвращать другой URL-адрес API на его основе.OK - Перезапуск foreach, новый контент добавляется в привязку данных, но последняя карусель остается в HTML, работая (?)
- Новый контентне очень хорошо работает с каруселью, так как предметы выглядят сложенными друг на друга.
Четвертый шаг произошел задолго до того, как я понял, что случилось с каруселями и жизненным циклом из KO;Мне пришлось использовать handleBinding, чтобы запустить функцию плагина после foreach.Проблема в том, что при обновлении foreach KO не перезапускает весь вид, только то, что внутри него, поэтому handleBinding игнорируется.
Кроме того, я не могу объяснить, почему на 3-м шагетам хранится последняя карусель.
Код:
Выбрать
<div id="select-regiao" data-bind="with: localizacoes" class="form-group mb-0">
<select id="selected-option" data-bind="options: planosPorLocalizacao, value: planosSelecionados" class="custom-select select-oi mr-2">
</select>
</div>
Карусель, foreach, карта ...
<div class="owl-carousel owl-theme" data-bind="foreach: planos, carousel">
<!-- #region card do plano -->
<div class="mt-4 m-2">
<div class="card card-plano">
[... card content... ]
</div>
</div>
<!-- #endregion -->
</div>
До </body>
<script src="assets/js/jquery-3.3.1.slim.min.js" type="text/javascript"></script>
<script src="assets/js/popper.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src='assets/bower_components/knockout/dist/knockout.js' type='text/javascript'></script>
<script src="assets/js/ko-models.js" type="text/javascript"></script>
<script src="assets/js/owl-2-2.3.4/dist/owl.carousel.min.js"></script>
My ko-models.js:
$(document).ready(function() {
apiUrl = "link";
localizacoes = {
planosPorLocalizacao: ["Todos", "Rio de Janeiro, RJ", "São Paulo, SP"],
planosSelecionados: ["Todos"]
};
planos = [];
var vm = null;
var select = document.getElementById("selected-option");
select.addEventListener("change", function() {
if (select.value == "Rio de Janeiro, RJ") {
apiUrl = "other link";
} else if (select.value == "São Paulo, SP") {
apiUrl = "other link";
} else if (select.value == "Todos") {
apiUrl = "link";
}
console.log(select.value);
MostraPlanos();
});
function MostraPlanos() {
fetch(apiUrl).then(function(next) {
next.json().then(function(res) {
// ko.cleanNode({planos: res});
res.forEach(el => {
el.dependentePreco = el["dependente-preco"];
el.precoReal = el["preco"].split(",")[0];
el.precoCentavo = el["preco"].split(",")[1];
});
planos = res;
if(vm == null) {
vm = {
planos: ko.observable(planos),
localizacoes
};
ko.applyBindings(vm);
}
else{
vm.planos(planos);
vm.gliderCarousel();
}
});
});
}
MostraPlanos();
ko.bindingHandlers.carousel = {
update: function() {
$(".owl-carousel").owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
}
}
});