How to attach a library to a specific block

Question

I wonder how to attach a library to a specific block. I do this:

in mytheme.libraries.yml

   lib-name-script:
      js:
        header: true
        js/masonry.pkgd.min.js: {}
        js/main.js: {}
      dependencies:
        - core/jquery

in main.js

jQuery(document).ready(function() {

    $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 220,
        horizontalOrder: true
    });
});

and in views-view--block-some.html.twig

{{ attach_library('theme_name/lib-name-script') }}

<div class="grid">
    {{ rows }}
</div>

But from some reason this dont works. :S

On the and of file I have:

<script src="/themes/theme_name/js/masonry.pkgd.min.js?oxcmsf"></script>
<script src="/themes/theme_name/js/main.js?oxcmsf"></script>

Was I corect load js, or mistake is on some other place?

Answer 1

It sure looks like you are on the right track to me. I've used the same approach myself. See: https://github.com/vegantriathlete/presentation/blob/master/templates/node--slide--full.html.twig

Have you cleared the cache? Maybe the theme registry needs to be updated to reflect the template you are using.

Have you viewed the page source of the page when that block is visible to see if the javascript is being included? Maybe the javascript is being attached and you've got a bug in your main.js. You aren't following the pattern of how to attach javascript. see: https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview

Answer 2

The problem was in main.js This solve my problem. Thank you vegantriathlete for help.

(function ($) {

    $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 220,
        horizontalOrder: true
    });

})(jQuery);