Turbolink禁止将Javascript附加类用作背景图像 [英] Turbolinks prohibiting Javascript appended class for background images

问题描述

我正在将前端html主题与Laravel应用程序集成在一起，并且遇到了Turbolink不允许Javascript追加div类的问题.这导致背景图像仅在刷新时显示.

I am integrating a front end html theme with a Laravel app and I am running into an issue with turbolinks not allowing Javascript to append div classes. This is causing the background images to only be displayed on refresh.

<div class="intro-banner" data-background-image="/storage/images/hero.jpg">
    <div class="container">

custom.js

custom.js

/*----------------------------------------------------*/
/*  Inline CSS replacement for backgrounds
/*----------------------------------------------------*/
function inlineBG() {

    // Common Inline CSS
    $(".single-page-header, .intro-banner").each(function() {
        var attrImageBG = $(this).attr('data-background-image');

        if(attrImageBG !== undefined) {
            $(this).append('<div class="background-image-container"></div>');
            $('.background-image-container').css('background-image', 'url('+attrImageBG+')');
        }
    });

} inlineBG();

// Fix for intro banner with label
$(".intro-search-field").each(function() {
    var bannerLabel = $(this).children("label").length;
    if ( bannerLabel > 0 ){
        $(this).addClass("with-label");
    }
});

// Photo Boxes
$(".photo-box, .photo-section, .video-container").each(function() {
    var photoBox = $(this);
    var photoBoxBG = $(this).attr('data-background-image');

    if(photoBox !== undefined) {
        $(this).css('background-image', 'url('+photoBoxBG+')');
    }
});

推荐答案

该代码似乎只运行一次:在初始页面加载时.要使它在每次页面加载时都有效，您将需要在turbolinks:load上运行它.由于脚本还将元素添加到页面，因此请注意不要以不必要的重复元素结尾. Turbolinks在访问者离开之前将页面的副本存储为最终状态.此缓存的副本将包括任何附加的HTML.因此，请确保您的代码在添加之前检查添加的元素是否存在，或者在缓存元素之前将其删除.

It looks like this code is only run once: on the initial page load. To get it working for every page load, you will need to run it on turbolinks:load. As the script also appends elements to the page, you need to be careful that you don't end up with unnecessary duplicate elements. Turbolinks stores a copy of the page in its final state before a visitor navigates away. This cached copy will include any appended HTML. So be sure your code checks for the presence of the appended elements before appending, or remove the elements before they are cached.

以下采用后一种方法，即删除了turbolinks:before-cache上的元素:

The following takes the latter approach, by removing elements on turbolinks:before-cache:

/*----------------------------------------------------*/
/*  Inline CSS replacement for backgrounds
/*----------------------------------------------------*/

$(document).on('turbolinks:load', function () {
    $(".single-page-header, .intro-banner").each(function() {
        var attrImageBG = $(this).attr('data-background-image');

        if(attrImageBG !== undefined) {
            $(this).append('<div class="background-image-container"></div>');
            $('.background-image-container').css('background-image', 'url('+attrImageBG+')');
        }
    });

    // Fix for intro banner with label
    $(".intro-search-field").addClass(function () {
        if ($(this).children("label").length) return "with-label";
    });

    // Photo Boxes
    $(".photo-box, .photo-section, .video-container").css('background-image', function () {
        return 'url('+$(this).attr('data-background-image')+')'
    })
});

$(document).on('turbolinks:before-cache', function () {
    $(".single-page-header, .intro-banner").each(function() {
        $(this).children(".background-image-container").remove();
    });
});

我也整理了一些jQuery代码.许多jQuery函数将函数作为参数接受，这在某种程度上简化了事情，并且无需使用each遍历jquery选择.

I have also tidied up some of the jQuery code. Many jQuery functions accept functions as arguments, which simplifies things somewhat, and removes the need to iterate over a jquery selection with each.

最后，在$(document).on('turbolinks:load', function () {…}中包装大量代码片段不是一个好习惯，因为这会导致对Turbolinks的依赖，并且，如果您决定移至其他内容，则必须在每个被调用的地方进行更新.如果您喜欢冒险，可以创建一个微型框架，例如我在此处创建的微型框架: https://stackoverflow.com /a/44057187/783009

Finally, wrapping lots of snippets in $(document).on('turbolinks:load', function () {…} is not great practice as creates a dependency on Turbolinks, and if you ever decided to move to something else, you have to update every place where this is called. If you're feeling adventurous, you may want to create a mini-framework like the one I create here: https://stackoverflow.com/a/44057187/783009

这篇关于Turbolink禁止将Javascript附加类用作背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！