कैसे Magento के 2 नॉकआउटJS बाइंडिंग लागू करता है

Question

नॉकआउटJS प्रलेखन के एक बहुत ही सरसरी वाचन के अनुसार, एक बहुत ही बुनियादी नॉकआउट दृश्य को शुरू करना निम्नलिखित की तरह दिखता है

// 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 में, यदि आप एक ग्रिड यूआई के साथ एक बैकएंड पेज लोड करते हैं, तो Magento js/core/app.jsNeedJJ मॉड्यूल को इनिशियलाइज़ करेगा

/**
 * 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मॉड्यूल को लोड करता है, जो कि मैगेंटो के नॉकआउट जेएस के उपयोग को शुरू करने के लिए प्रकट होता है। हालाँकि, यदि आप इनिशियलाइज़ मॉड्यूल के स्रोत को देखते हैं।

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();
});

आप Magento के ko.applyBindings();ऑब्जेक्ट को बिना व्यू ऑब्जेक्ट के कहते हैं । इसका कोई मतलब नहीं है, और मुझे यकीन नहीं है कि अगर यह नॉकआउट की मेरी सीमित समझ है, या मैगेंटो यहाँ कुछ कस्टम / अजीब कर रहा है।

क्या यह वह जगह है जहाँ Magento वास्तव में नॉकआउट बाइंडिंग लागू करता है? या कहीं और ऐसा होता है? या Magento नॉकआउट कोड को अवरोधन और कहीं और संसाधित करने के लिए कुछ मुश्किल कर रहा है?

Answer 1

Magento_Ui/js/lib/ko/initializeपुस्तकालय जहां Magento अपने नॉकआउट उदाहरण initializes, वास्तव में, है। जब यह बाइंडिंग लागू करता है तो Magento एक ViewModel असाइन नहीं करता है ।

लापता यहाँ मुख्य बिंदु बंधन कस्टम KnockoutJS नामित scope।

जब Magento के नॉकआउट उदाहरण एक 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। आप कुछ विशेष नॉकआउटJS preडीबगिंग के साथ एक विशेष दायरे के लिए बाध्य डेटा को डीबग कर सकते हैं

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

uiRegistryवस्तु की तरह एक साधारण शब्दकोश, में लागू है Magento_Ui/js/lib/registry/registryRequireJS मॉड्यूल।

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

Comments

एलन यह एक महान जवाब है! जानकारी के लिए धन्यवाद। बुलेट पॉइंट 3 के बारे में यह नए तात्कालिक ऑब्जेक्ट में अतिरिक्त डेटा कुंजियों को कैसे जोड़ेगा। यह गुण होगा या कुछ और?

— टिम