ฉันใหม่สำหรับ Magento2 และองค์กรของเราเพิ่งได้รับใบอนุญาต EE ฉันได้ติดตั้งไว้ในเครื่องท้องถิ่นของฉันแล้วและแม่แบบเริ่มต้นจะแยกออกมาผสมกับ HMTL ดังต่อไปนี้:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer"
                }
            }
        }
    }
}
</script>

และสายที่ชอบ

<script type="text/x-magento-init">
{
"*": {
    "Magento_Ui/js/core/app": {
        "components": {
                "messages": {
                    "component": "Magento_Theme/js/view/messages"
                }
            }
        }
    }
}
</script>

นี้จะทำอย่างไรกับเป็นKnockoutJSหรือRequireJS? การเรียกเหล่านี้คืออะไรและแท็กสคริปต์ใหม่นี้คืออะไร<script type="text/x-magento-init">

การใช้งานทั่วไปของ "ประเภทสคริปต์"

เมื่อใช้<script type="....">เบราว์เซอร์จะตีความเฉพาะสิ่งที่รู้ (เช่นtext/javascriptตัวอย่าง)
สิ่งอื่นใดที่ถูกเพิกเฉย
โดยทั่วไปใช้ประเภทที่กำหนดเองคุณกำลังเพิ่มข้อมูลลงในหน้าโดยไม่แสดงและไม่มีเบราว์เซอร์ตีความมันและคุณสามารถใช้ข้อมูลนั้นได้ในภายหลังตามที่คุณต้องการ

Magento ใช้สิ่งนี้อย่างไร

Magento ใช้ส่วนเหล่านี้หลังจากที่โหลดหน้าเว็บ รหัสที่ใช้พวกเขาตั้งอยู่ใน
ฉันไม่เข้าใจอย่างสมบูรณ์ว่าไฟล์ที่กล่าวถึงข้างต้นทำอะไร แต่มีความคิดเห็นอยู่ภายในไฟล์ที่ระบุสิ่งนี้:lib/web/mage/apply/scripts.js

/**
 * Parses 'script' tags with a custom type attribute and moves it's data
 * to a 'data-mage-init' attribute of an element found by provided selector.
 * Note: All found script nodes will be removed from DOM.
 *
 * @returns {Array} An array of components not assigned to the specific element.
 *
 * @example Sample declaration.
 *      <script type="text/x-magento-init">
 *          {
 *              "body": {
 *                  "path/to/component": {"foo": "bar"}
 *              }
 *          }
 *      </script>
 *
 * @example Providing data without selector.
 *      {
 *          "*": {
 *              "path/to/component": {"bar": "baz"}
 *          }
 *      }
 */

สรุป / การเก็งกำไร

ฉันคาดการณ์ว่านี่เป็นวิธีตั้งค่าพฤติกรรม js ที่แตกต่างให้กับองค์ประกอบต่าง ๆ ในหน้าเว็บโดยไม่จำเป็นต้องเขียนเทมเพลตที่มีองค์ประกอบ
คุณจะต้องเพิ่ม<script type="text/x-magento-init">เทมเพลตตัวใดตัวหนึ่งของคุณเท่านั้นรวมเทมเพลตของคุณในหน้าและวีโอไอพี "auto-magically" ย้ายพฤติกรรมไปยังองค์ประกอบที่เหมาะสม

นอกจากนี้

ผู้ขาย \ วีโอไอพี \ magento2 ฐาน \ lib \ เว็บ \ ผู้วิเศษ \ ใช้ \ scripts.js

var scriptSelector = 'script[type="text/x-magento-init"]',
        dataAttr = 'data-mage-init',
        virtuals = [];

โดยใช้คำแนะนำด้านล่าง

http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html

ไวยากรณ์มาตรฐานคือ

<script type="text/x-magento-init">
{
    // components initialized on the element defined by selector
    "<element_selector>": {
        "<js_component1>": ...,
        "<js_component2>": ...
    },
    // components initialized without binding to an element
    "*": {
        "<js_component3>": ...
    }
}
</script>

โดยการอ้างอิง

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_introducing_ui_components

Magento มักใช้x-magento-initวิธีในการเรียกใช้โมดูล RequireJS เป็นโปรแกรม อย่างไรก็ตามพลังที่แท้จริงของx-magento-initความสามารถในการสร้างส่วนประกอบ Javascript Javento

Magento Javascript Components เป็นโมดูล RequireJS ที่ส่งคืนฟังก์ชัน

วีโอไอพีพบtext/x-magento-initแท็กสคริปต์ที่มีคุณลักษณะ * มันจะ

1] เริ่มต้นโมดูล RequireJS ที่ระบุ (Magento_Ui / js / core / app)

2] เรียกใช้ฟังก์ชันที่ส่งคืนโดยโมดูลนั้นส่งผ่านวัตถุข้อมูล

หวังว่ามันจะช่วย