0

在同一路线的动态段之间导航时出现错误，例如当我在/project/my-project/到/project/my-project/gallery之间导航时一切正常。

/project/my-project/但是当我从to/project/my-other-project 或/project/my-project/galleryto导航时/project/my-other-project

未捕获的 DOMException：无法在 'Node' 上执行 'insertBefore'：要插入新节点的节点不是该节点的子节点

未捕获（承诺中）DOMException：无法在“节点”上执行“insertBefore”：要插入新节点的节点不是该节点的子节点。

这是我的应用程序路由结构的一部分 在此处输入图像描述

像这样用 router.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}}/>

项目/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>

项目/画廊.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}}/>从我的 project.hbs 中，我没有收到任何错误。

这是我的 home/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}}代码给了我错误，我不知道为什么。

更新 2

我认为光滑的滑块初始化是我评论它们时给我错误的原因，我没有收到错误，但显然我的滑块也不起作用。

这是 components/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
                    }
                }
            ]
        });

    }
});
4

0 回答 0