วีโอไอพี 2 มีการใช้ KnockoutJS อย่างไร

ตามการอ่านคร่าวๆของเอกสารประกอบ KnockoutJS การเริ่มต้นมุมมองการทำให้ล้มลงพื้นฐานขั้นพื้นฐานจะมีลักษณะดังนี้

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

เช่น - คุณสร้างฟังก์ชั่นจาวาสคริปต์ที่มีวัตถุประสงค์เพื่อใช้เป็นตัวสร้างวัตถุยกตัวอย่างวัตถุจากนั้นส่งวัตถุนั้นไปยังko.applyBindingsวิธีการของวัตถุพิศวงทั่วโลก ( ko)

อย่างไรก็ตามใน Magento 2 หากคุณโหลดหน้าเว็บแบ็กเอนด์ด้วย Grid UI Magento จะเริ่มต้น js/core/app.jsโมดูล RequireJS

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    './renderer/types',
    './renderer/layout',
    'Magento_Ui/js/lib/ko/initialize'
], function (types, layout) {
    'use strict';

    return function (data) {
        types.set(data.types);
        layout(data.components);
    };
});

ในทางกลับกันโมดูลนี้จะโหลดMagento_Ui/js/lib/ko/initializeโมดูลซึ่งจะปรากฏขึ้นจะเริ่มต้นการใช้ KnockoutJS ของ Magento อย่างไรก็ตามหากคุณดูที่แหล่งที่มาของโมดูลเริ่มต้น

define([
    'ko',
    './template/engine',
    'knockoutjs/knockout-repeat',
    'knockoutjs/knockout-fast-foreach',
    'knockoutjs/knockout-es5',
    './bind/scope',
    './bind/staticChecked',
    './bind/datepicker',
    './bind/outer_click',
    './bind/keyboard',
    './bind/optgroup',
    './bind/fadeVisible',
    './bind/mage-init',
    './bind/after-render',
    './bind/i18n',
    './bind/collapsible',
    './bind/autoselect',
    './extender/observable_array',
    './extender/bound-nodes'
], function (ko, templateEngine) {
    'use strict';

    ko.setTemplateEngine(templateEngine);
    ko.applyBindings();
});

คุณเห็นวีโอไอพีที่เรียกว่า ko.applyBindings();วัตถุโดยไม่ต้องวัตถุมุมมอง สิ่งนี้ไม่สมเหตุสมผลและฉันไม่แน่ใจว่ามันเป็นความเข้าใจที่ จำกัด ของฉันเกี่ยวกับสิ่งที่น่าพิศวงหรือ Magento ทำสิ่งที่กำหนดเอง / แปลกที่นี่

นี่คือสิ่งที่ Magento ใช้การเชื่อมที่น่าพิศวงจริงหรือ หรือว่าเกิดขึ้นที่อื่น? หรือวีโอไอพีกำลังทำสิ่งที่ยุ่งยากในการสกัดโค้ด Knockout และประมวลผลที่อื่น?

Magento_Ui/js/lib/ko/initializeห้องสมุดเป็นจริงที่วีโอไอพีเริ่มต้นอินสแตนซ์ที่น่าพิศวงของมัน วีโอไอพีไม่กำหนด ViewModel เมื่อใช้การเชื่อม

กุญแจที่หายไปนี่เป็นKnockoutJS กำหนดเองผูกพันscopeชื่อ

เมื่ออินสแตนซ์ที่น่าพิศวงของวีโอไอพีพบความscope:ผูกพันเช่นนี้

<li class="greet welcome" data-bind="scope: 'customer'">
    <span data-bind="text: customer().fullname ? $t('Welcome, %1!').replace('%1', customer().fullname) : 'Default welcome msg!'"></span>
</li>

มันต้องใช้เวลาคุ้มค่าที่มีผลผูกพัน (ชื่อcustomer) และใช้มันในการโหลดและใช้ ViewModel uiRegistryสำหรับโหนดภายในจาก คุณสามารถดีบักข้อมูลที่ถูกผูกไว้สำหรับขอบเขตเฉพาะด้วยการpreดีบักKnockoutJS แบบง่าย ๆ

<div data-bind="scope: 'someScope'">
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>            
</div>

นี่uiRegistryเป็นพจนานุกรมอย่างง่ายเช่นเดียวกับวัตถุซึ่งถูกนำไปใช้ในMagento_Ui/js/lib/registry/registryโมดูล RequireJS

vendor/magento/module-ui/view/base/requirejs-config.js
17:            uiRegistry:     'Magento_Ui/js/lib/registry/registry',

วัตถุจะถูกใส่เข้าไปในรีจิสทรีผ่านทางจาวาสคริปต์ที่มีลักษณะเช่นนี้

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

โปรแกรมในMagento_Ui/js/core/appโมดูลจะตรวจสอบcomponentsคีย์ของวัตถุที่ส่งผ่านและสำหรับแต่ละวัตถุย่อย

1. ดึงวัตถุที่ถูกส่งคืนโดยRequireJSโมดูลที่ระบุจากcomponentคีย์ ( Magento_Customer/js/view/customer)

2. ใช้วัตถุนั้นเพื่อยกตัวอย่างวัตถุจาวาสคริปต์ใหม่ (ดูด้านล่าง)

3. กำหนดคีย์ข้อมูลพิเศษให้กับวัตถุเดียวกันนั้น

4. เพิ่มวัตถุเดียวกันนั้นลงไปuiRegistryด้วยปุ่มของวัตถุต้นฉบับ ( customerด้านบน)

หากคุณไม่แน่ใจว่าx-magento-initสคริปต์ทำงานอย่างไรฉันได้เขียนบทความเกี่ยวกับเรื่องนี้ที่นี่ผมเคยเขียนบทความเกี่ยวกับเรื่องนี้ที่นี่

มีการตรวจสอบapp.jsกระบวนการในเชิงลึกมากกว่าในคำตอบนี้นี้

มีการกำหนดขอบเขตการใช้ขอบเขตไว้ที่นี่

vendor/magento//module-ui/view/base/web/js/lib/ko/bind/scope.js