Ember Js: ошибка при переходе между сегментами Dynami c одного и того же маршрута (не удалось выполнить 'insertBefore')

Question

Я получаю сообщение об ошибке при переходе между динамическим c сегментом одного и того же маршрута, например, когда я перемещаюсь между / project / my-project / на / project / my-project / gallery все работает нормально.

Но при переходе от /project/my-project/ к /project/my-other-project или /project/my-project/gallery к /project/my-other-project

Uncaught DOMException: Не удалось выполнить 'insertBefore 'on' Node ': узел, перед которым должен быть вставлен новый узел, не является дочерним для этого узла

Uncaught (в обещании) DOMException: не удалось выполнить' insertBefore 'на' Node ': узел перед которым новый узел должен быть вставлен, не является дочерним узлом этого узла.

Это часть моей структуры маршрута приложения

, которая написано в роутере. js вот так

this.route('project', {path: '/project/:seo_url'}, function() {
 this.route('gallery');
});

это то, что я написал в project.hbs

<Project::Banner @title="{{this.model.name}}" @image="assets/images/projects/project-banner.jpg"/>
<section>
    <div class="container">
        <div class="tabs has-border-bottom">
            {{#link-to "project.index" this.model.seo_url}}Description{{/link-to}}
            {{#link-to "project.gallery" this.model.seo_url}}Gallery{{/link-to}}
            {{#link-to "project.index" 'my-other-project'}}Error When I click this{{/link-to}}
        </div>
    </div>
</section>
{{liquid-outlet}}

<Home::ProjectSlider @title="Latest Projects" @projects={{this.model.latest_projects}}/>

project / index.hbs

<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                placeholder content
            </div>
            <div class="col-sm-8">
                <div class="project-detail-description">
                    <h5>Description {{this.model.seo_url}}</h5>
                    {{{this.model.description}}}
                    <div class="categories">
                        <h5>Scope of Work</h5>
                        {{#each this.model.categories as |category|}}
                            <div class="category">{{category}}</div>
                        {{/each}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

project / gallery.hbs

<section>
    <div class="container">
        <div class="row project-gallery index-items">
            {{#each this.model.gallery as |picture|}}
                <div class="col-sm-4">
                    <div class="project-item">
                        <a data-fancybox="gallery" href="{{env 'rootURL'}}{{picture}}">
                            <img src="{{env 'rootURL'}}{{picture}}">
                            <div class="gradient-overlay full"></div>
                        </a>
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</section>

Project :: Banner и Home :: ProjectSlider являются составными и я не знаю, имеют ли они отношение к этой проблеме.

ОБНОВЛЕНИЕ 1

Я пытался удалить

<Home::ProjectSlider @title="Latest Projects" @projects={{this.model.latest_projects}}/> из моего проекта .hbs и я не получил никакой ошибки.

Вот код моего дома / project-slider.hbs

<section data-aos="fade-up" data-aos-duration="2000">
    <div class="container">
        <div class="clearfix pos-rel">
            <h2 class="inline-block">{{@title}}</h2>
            <LinkTo @route="projects" class="see-more-button">
                <div class="pull-right"><div class="hidden-xs inline-block">See More</div> <FaIcon @icon="arrow-right" /></div>
            </LinkTo>

        </div>
    </div>
    <div class="banner">
        <div id="projects-slider">
            {{#each @projects as |project|}}
            <div class="project-item">
                {{#link-to 'project.index' project.seo_url}}
                    <img src="{{env 'rootURL'}}{{project.image}}" alt="{{project.title}}">
                    <div class="gradient-overlay"></div>
                    <div class="project-detail">
                        <h5>{{project.name}}</h5>
                        <div class="btn-flat alt2 inline-block"><span>See the work</span></div>
                    </div>
                {{/link-to}}
            </div>
            {{/each}}
        </div>
    </div>
    <div class="container has-border-bottom"></div>
</section>

{{# each}} * Код 1055 * дает мне ошибки, и я не понимаю, почему.

ОБНОВЛЕНИЕ 2

Я думаю, что инициализация скользящего слайдера - это то, что дает мне ошибки, когда я комментирую их, я я не получаю ошибок, но, очевидно, мой слайдер тоже не работает.

вот код компонентов / home / project-slider. js Я надеюсь, что кто-то любезно изучит его

import Component from '@ember/component';

export default Component.extend({
    didInsertElement() {
        // this._super(...arguments);
        $('#projects-slider').slick({
            slidesToShow: 4,
            slidesToScroll: 3,
            infinite: false,
            responsive: [
                {
                    breakpoint: 1440,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 769,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });

    }
});