จะเพิ่ม Block Specific JS (และ CSS) ได้อย่างไร

ดังนั้นฉันจึงใช้เวลาเป็นชั่วโมงในการค้นหาอ่านหนังสือเรียน ฯลฯ แต่ไม่มีใคร (ไม่ใช่แม้แต่อลันสตอร์ม!) สะกดคำนี้ให้ฉัน ดูเหมือนว่าอินเทอร์เน็ตทั้งหมดจะสนใจในการเพิ่มหรือ JS CSS เพื่อโดยเฉพาะอย่างยิ่งหน้าของวีโอไอพี 2 แต่สิ่งที่ฉันกำลังมองหาคือการเพิ่ม JS / CSS เพื่อเฉพาะบล็อก

ดังนั้นนี่คือคำถามของฉันโดยย่อ:

วิธีที่ดีที่สุดในการเพิ่ม JS (และ CSS เพิ่มเติม) ลงในบล็อกนั้นคืออะไรดังนั้นหากบล็อกนั้นปรากฏบนหน้า (*) โหลด JS / CSS หากบล็อกไม่มีอยู่นั้นจะไม่มี CSS / JS? ?

* ซึ่งหมายความว่าสามารถตั้งค่าบล็อกใด ๆ บนเพจ / เทมเพลตผ่าน layout.xml บนเพจที่กำหนดเองจากโมดูลของฉันผ่านวิธี toHtml ของบล็อก / เพจหรือที่สำคัญที่สุดคือบล็อกที่ฝังอยู่ใน WYSIWYG ของหมวดหมู่ / คำอธิบายผลิตภัณฑ์ / CMS Block / หน้า CMS

ฉันได้อ่านบทความดีๆมากมายของ Alan (คำชื่นชมอีกครั้งกับผู้ชายคนนี้ !!) ไม่ต้องพูดถึงเรื่องรีมของบทความอื่น ๆ เกี่ยวกับเรื่องนี้แต่ฉันรู้สึกว่าทุกคนต้องการเพิ่มหน้าเพจเฉพาะที่ไม่เคย ใช้บล็อก

ฉันรู้สึกว่าฉันคุ้นเคยกับเทคนิคต่าง ๆ แต่ฉันอาจจะพลาดอะไรบางอย่างที่นี่ดังนั้นฉันจึงต้องการความเห็นชอบจากชุมชนรวมทั้งอาจเป็นบิตของการโพสต์สัญญาณสำหรับทุกคนที่อยู่ข้างหน้าจนถึงเต็มกอง devs คำถามที่คล้ายกันและไตร่ตรองตัวเลือกต่าง ๆ ในขณะที่ฉัน

ก่อนหน้านี้ใน Magento 1 ฉันจะดูที่ตัวสร้างบล็อกรับเค้าโครงรับการอ้างอิงส่วนหัวและเรียกใช้ addJs / addCss ที่นั่นหรือถ้าเป็นไปได้ให้ใช้วิธีการใน layout.xml สิ่งนี้จะหมายถึงว่า JS ถูก"เพิ่ม"ไปยังรายการการช่วยเหลือบนตัวสร้างบล็อก (ก่อนที่ระดับธีมจะแสดงผลบล็อกใหญ่) แต่ตอนนี้ดูเหมือนจะเป็นไปไม่ได้

ฉันได้อ่านเกี่ยวกับการเพิ่ม JS / CSS (นี่ไม่ใช่เรื่องง่าย "ฉันจะทำอย่างไร" นี่เป็นข้อตกลงเพิ่มเติม "เป็นวิธีที่ถูกต้อง / mag2 ทาง ???") และคุ้นเคยกับสิ่งเหล่านี้ เทคนิค:

/view/هareaonymous/layout/هdefault/page_idlike.xmlเทคนิคการใช้<head></head>องค์ประกอบราก
การเพิ่มบล็อกใหญ่ลงในโมดูลของฉันผนวกเข้ากับ head.additional พร้อมกับตรรกะบางอย่างเกี่ยวกับว่าบล็อกของฉันโหลดหรือไม่
ใช้ \ Asset \ GroupedCollection และ \ Asset \ Repository Objects เพื่อฉีดจาก custructor ของหน้า / เทมเพลต (ซึ่งดูเหมือนว่าจะไม่ได้ ork กับบล็อกแม้ว่า) คำสั่งในการโหลดอาจเกิดขึ้น?
การใช้ RequireJS และการกำหนดค่า requireJS ให้กับโมดูลของฉัน

ฉันพลาดอะไรไปหรือเปล่า?

หนึ่งเชื่อว่าวิธีที่ถูกต้องคือการใช้ห้องสมุด RequireJS และแอตทริบิวต์ x-magento-init หรือเพียงแค่สคริปต์ที่มีrequire("my_module", function(){ ... })ไวยากรณ์ในสคริปต์แบบอินไลน์ แต่ดูเหมือนว่า klunky สำหรับฉัน ฉันจะต้องตั้งค่าสคริปต์เพื่อโหลดสคริปต์ฉันถูกบังคับให้แทรกอินไลน์อย่างน้อย JS ของฉัน แต่ดูเหมือนว่าวิธีที่พูดง่ายที่สุดในการพูดว่า "นี่คือบล็อกของฉันตอนนี้ต้องการ JS บางส่วน" โดย popping สิ่งนี้ลงใน phtml ของฉัน

อย่างไรก็ตามฉันอยากจะทำสิ่งนี้ผ่านทาง PHP ในฐานะที่เป็นโปรแกรมเมอร์แบ็กเอนด์ / สแต็คฉันควรนึกถึงการออกจาก JS และอนุญาตให้ทีมส่วนหน้าเขียนตามที่พวกเขาต้องการ ในระยะสั้นดูแลการโหลด (Back End Dev เพื่อ Frond End Dev "heres phtml, แทนที่ในชุดรูปแบบหากคุณต้องการเช่นเดียวกัน heres ไฟล์ js, libs ขึ้นอยู่กับมันและ CSS สำหรับบล็อก")

นี่เป็นการแนะนำ__constructวิธีการที่ขึ้นอยู่กับการพึ่งพาการฉีดในระบบสินทรัพย์ ฉันไม่สามารถทำงานนี้ได้ แต่ดูเหมือนว่าจะได้รับการยืนยันใน Alan Storms บทความด่วนที่นี่: Magento Quickies: Magento 2: การเพิ่มไฟล์สินทรัพย์ Frontend โดยทางโปรแกรม

สังเกตเครื่องหมายออก"ดังนั้นความคิดใด ๆ ในการสร้างบล็อกที่มีสินทรัพย์ส่วนหน้าของพวกเขาอยู่นอกหน้าต่าง" ... คนเกียจคร้าน :(

ขอขอบคุณพวกคุณสำหรับการสละเวลาในการอ่านและพิจารณา ฉันหวังว่าจะได้ยินคำตอบของคุณ!

PS> เห็นได้ชัดว่านี่คือ StackExchange ดังนั้นฉันจะทำเครื่องหมายคำตอบว่าเป็นหลักสูตรที่ดีที่สุดสำหรับสิ่งที่ฉันพยายามที่จะบรรลุ (บล็อกการโหลดทรัพยากรที่เฉพาะเจาะจง) แต่ฉันจะพยายามแสดงรายการ refences ที่ด้านล่างของโพสต์ของฉัน ที่เพิ่มไปยังการสนทนาหรือแนะนำวิธีการแก้ปัญหาที่มั่นคง!

— ดิจิตอล Cygnus
แหล่งที่มา

สำหรับ js มันควรจะเป็นเรื่องง่ายเพราะวีโอไอพี 2 require.jsใช้
ดังนั้นหมายความว่าคุณสามารถรวม js ได้ทันทีเมื่อคุณต้องการ

เทมเพลตจะต้องมีการสร้างบล็อก (ในกรณีส่วนใหญ่)
ดังนั้นคุณต้องเพิ่มสิ่งนี้ลงในเทมเพลตของคุณ:

<script type="text/javascript">
    require([
        "jquery",
        .... //any other js dependencies you have
        "Namespace_Module/js/filename_here"
    ], function(){
        //some js code here. 
        //if you don't need any additional js code just have an empty function
    });
</script>

ตอนนี้สร้างไฟล์view/adminhtml|frontend/web/js/filename_here.jsjs ของคุณที่มีรหัส js ทั้งหมดของคุณ

require.js จะทราบวิธีรับไฟล์ของคุณเมื่อมีการร้องขอ

สำหรับไฟล์ css ฉันไม่รู้ว่าเป็นไปได้หรือไม่
ไฟล์ css ควรไปที่headส่วนของหน้า แต่ถ้าคุณมีบล็อกของคุณอยู่ในเนื้อหาของหน้า cms เช่นนี้{{block class="..." template="..."}}เมื่อเนื้อหาของหน้า cms ควรได้รับการประมวลผล html จนถึงจุดนั้นจะถูกแสดงผลแล้ว ดังนั้นคุณจึงไม่สามารถเพิ่มสิ่งอื่นใดลงในหัวบล็อกผ่าน php คุณสามารถลองเพิ่มในเทมเพลตที่ชอบ<style...แต่นั่นไม่ใช่สิ่งที่คุณต้องการ (ฉันถือว่า)

— Marius
แหล่งที่มา

ขอบคุณ Marius ฉันกำลังสำรวจเส้นทาง requireJS ว่าเป็นหนึ่งในความเป็นไปได้ที่ฉันได้ระบุไว้ข้างต้น แต่ขอบคุณสำหรับตัวอย่างของข้อตกลง! ฉันเห็นด้วย แต่มันไม่ได้นำเสนอวิธีแก้ไขปัญหา CSS แต่นี่อาจเป็นจุดปิดเสียงเนื่องจากคอมไพเลอร์น้อยกว่าของวีโอไอพี นอกจากนี้มันเป็นนามธรรม แต่ฉันคิดว่าเราสามารถใช้ requireJS เพื่อโหลด JS ของเราซึ่งในทางกลับกันก็สามารถเพิ่มลิงค์ไปยังสไตล์ชีทของ DOM ได้อย่างน้อยก็ asyncronous !!!

— Cygnus digital

ในความเป็นจริงฉันพบสิ่งนี้ในหน้า requirejs วิธีโหลด CSS ด้วย RequireJS! : requirejs.org/docs/faq-advanced.html#css

— cygnus digital

@cygnusdigital ดี แก้ไขปัญหาได้แล้ว :)

— Marius

สวัสดี Marius ใช่และไม่ใช่เป็นผู้สมัครที่ดีสำหรับการแก้ปัญหามันเหมาะกับความต้องการดังนั้นฉันขอขอบคุณสำหรับข้อมูลของคุณ แต่ฉันกำลังมองหาการสนทนาและทางเลือก บางทีมันอาจเป็นเพียงแค่ฉันเป็นไดโนเสาร์ แต่ฉันก็รู้สึกว่ามันเป็นมากกว่าที่จะมีการโหลด JS / CSS ภายในตัวสร้างเช่น "ถ้าบล็อกนั้นถูกสร้าง / รวมอยู่ให้เพิ่มส่วนนี้ไว้ในส่วนหัว" : DI สงสัยว่ามันเป็นไปได้ที่จะเพิ่มไปยังเงื่อนไข head.additional บล็อกได้ทันที (เช่นเพิ่มบล็อกหัวจากโมดูลของฉันไปที่ head.additional ในขั้นตอนการสร้างบล็อก)

— Cygnus digital

คุณสามารถทำได้ด้วยบล็อกปกติที่เพิ่มผ่านไฟล์เลย์เอาต์ แต่ตามที่ฉันอธิบายคุณไม่สามารถทำได้สำหรับบล็อกที่รวมอยู่ในเนื้อหาของเพจผ่าน{{block}}คำสั่งเนื่องจากส่วนหัวจะแสดงผลแล้วเมื่อคลาสบล็อกถูกสร้างอินสแตนซ์

— Marius

จะเพิ่ม Block Specific JS (และ CSS) ได้อย่างไร - วิธี _right_