Question

我有一个正在从事的小项目，这是我第一次使用KnockoutJS（这是我使用JavaScript以来的很长时间）。

任何JavaScript转盘可与foreach，直到阵列被更新。使用滑翔机，光滑和猫头鹰的插件，它们都结束了做同样的事情，我已经尝试：

文档开始，foreach启动，将使用从URL提取的卡片填充轮播。好
使用<select>，我更改了选项，该选项将基于该选项返回不同的API URL。好
在foreach重新启动时，所述新的内容被抛出在数据绑定，但最后转盘保持在HTML，工作（？）
新内容无法与轮播一起使用，因为这些项目显示为彼此堆叠。

第四步实际发生之前很久我理解与来自KO转盘和生命周期发生了什么;我不得不使用handleBinding，启动插件功能的后在foreach制成。问题是，在更新foreach时，KO不会重新启动整个视图，而不会重新启动视图中的全部视图，因此handleBinding将被忽略。

另外，我无法解释为什么，在第三步骤中，将最后的转盘保持在那里。

代码：

选择

<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>

我的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
                    }
                }
            });
        }
    }
});

Answer 1

我发现问题出在插件用来跟踪轮播的方式上。例如，滑翔机是我最后一次尝试并花了很多时间的时间。

从Glider.js中的可能选项中：

addTrack

类型：布尔值

默认值：true

无论Glider.js是否应使用   “滑翔机跟踪”。

注意：如果为false，Glider.js将假定   “ glider-track”元素已手动添加。所有幻灯片必须   跟踪元素的子元素。

将.glider-track添加到外部div（纸牌的父级）并在JS中设置addTrack: false解决了该问题！

使用转盘和一个更新的基因敲除的foreach

1 个答案: