Magento 2 के भीतर नॉकआउट जेएस का उपयोग कैसे करें

Question

मेरी समस्या:

मैं Magento 2 के भीतर एक छोटा सा नॉकआउट JS एप्लिकेशन लिखने का प्रयास कर रहा हूं, मैं ऐप को इनिशियलाइज़ करने के लिए संघर्ष कर रहा हूं क्योंकि जब मैं इसका उपयोग ko.applyBindings(AppViewModel, document.getElementById("koTest"));करता हूं तो मैगेंटो द्वारा उपयोग किए जाने वाले नॉकआउट को तोड़ता हूं और इस त्रुटि को फेंकता हूं :

Uncaught Error: You cannot apply bindings multiple times to the same element.

मुझे संदेह है कि इसकी वजह यह है:

मुझे संदेह है क्योंकि Magento 2 पहले से ही ko.applyBindings()भीतर उपयोग करता है app/code/Magento/Ui/view/base/web/js/lib/knockout/bootstrap.js। और जैसा कि एक नोड निर्दिष्ट नहीं करता है मैं ko.applyBindingsफिर से उपयोग नहीं कर सकता ।

अगर मैं ko.applyBindings(AppViewModel, document.getElementById("koTest"))अपने कोड में उपयोग नहीं करता हूं तो मेरा ऐप इनिशियलाइज़ नहीं होता है।

इससे मुझे लगता है कि मुझे किसी तरह ko.applyBindings()नॉकआउट / बूटस्ट्रैप.जेएस में उपयोग करने की आवश्यकता है, लेकिन मुझे नहीं पता कि कैसे, क्या कोई मदद कर सकता है? मुझे नॉकआउट का बहुत कम अनुभव है।

मेरा कोड

<script type="text/javascript">
    require([
        'ko'
    ], function(ko) {
        // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
        function AppViewModel() {

            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");
            this.fullName = ko.computed(function() {
                return this.firstName() + " " + this.lastName();
            }, this);

            this.capitalizeLastName = function() {
                var currentVal = this.lastName();
                this.lastName(currentVal.toUpperCase());
            };
        }

        ko.applyBindings(AppViewModel, document.getElementById("koTest"));
    });
</script>

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

<div id="koTest">
    <p>First name: <strong data-bind="text: firstName"></strong></p>
    <p>Last name: <strong data-bind="text: lastName"></strong></p>
    <p>Full name: <strong data-bind="text: fullName"></strong></p>

    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <p>Full name: <input data-bind="value: fullName" /></p>

    <button data-bind="click: capitalizeLastName">Capitalise</button>
</div>

Comments

यहाँ एक ट्यूटोरियल है: inchoo.net/magento-2/knockout-js-in-magento-2

— हारून एलन

Answer 1

सरल विधि जहां आपको html टेम्पलेट का उपयोग करने की आवश्यकता नहीं है

विनय कोप्प की बदौलत मुझे आखिरकार इसका जवाब मिल गया है, यह मेरे पिछले हैकी वर्कअराउंड (मैं क्लोड्स को साफ़ कर रहा था) की तुलना में बहुत सरल है। आपको बस 'ko'एक निर्भरता के रूप में परिभाषित करने और रिटर्न फ़ंक्शन के अंदर अपना कोड जोड़ने की आवश्यकता है।

नीचे एक सरल उदाहरण है जो JSON के माध्यम से पारित कुछ पाठ को प्रस्तुत करता है।

app/code/VENODR/MODULE/view/frontend/templates/knockout-example.phtml

यहाँ हम Magento को हमारे घटकों का दायरा बताते हैं (यह data-bind: "scope: 'example-scope'"किसी भी अतिरिक्त डेटा से मेल खाना चाहिए और पास होना चाहिए । यह आधार URL हो सकता है, एक साधारण संदेश, जो आप चाहते हैं, बहुत कुछ। मैंने एक स्ट्रिंग (PHP इको) एक उदाहरण के रूप में पारित किया है।

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "example-scope": {
                    "component": "VENDOR_MODULE/js/knockout-example",
                    "exampleMessage": "<?= __('Hello Magento Stack Exchange!') ?>"
                }
            }
        }
    }
}
</script>

<div data-bind="scope: 'example-scope'">
    <h2 data-bind="text: message"></h2>
</div>

और यहाँ हम अपनी जावास्क्रिप्ट लिखते हैं।

app/code/VENDOR/MODULE/view/frontend/web/js/knockout-example.js

define(['ko'], function(ko) {
    return function(config) {
        this.message = ko.observable(config.exampleMessage);
    }
});

 परिणाम

---------------------

वह विधि जहाँ आपको HTML टेम्प्लेट का उपयोग करने की आवश्यकता हो

यदि आप Magento2 / नॉकआउट के भीतर HTML टेम्प्लेटिंग सिस्टम का उपयोग करना चाहते हैं (जो मुझे लगता है कि आपको किसी भी महत्वपूर्ण काम के लिए आवश्यकता होगी) तो मेरे सरलीकृत उत्तर (नीचे) की तुलना में कुछ बदलाव करने होंगे।

यदि आपको टेम्प्लेट की कार्यक्षमता की आवश्यकता नहीं है, तो मेरे पुराने सरलीकृत उत्तर पर स्क्रॉल करें।

इस उदाहरण के लिए मैं जिन फ़ाइलों का उपयोग कर रहा हूं वे हैं:

• app/design/frontend/VENDOR/THEME/Magento_Cms/templates/knockout.phtml
• app/design/frontend/VENDOR/THEME/Magento_Cms/web/js/knockout-example.js
• app/design/frontend/VENDOR/THEME/Magento_Cms/web/template/test.html

PHTML टेम्पलेट फ़ाइल

हमारे PHTML टेम्प्लेट में एकमात्र परिवर्तन getTemplate()फ़ंक्शन के लिए कॉल है :

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "example-scope": {
                    "component": "Magento_Cms/js/knockout-example",
                    "exampleMessage": "<?= __('Hello Magento Stack Exchange!') ?>"
                }
            }
        }
    }
}
</script>

<div data-bind="scope: 'example-scope'">
    <h2 data-bind="text: message"></h2>
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

जेएस (घटक) फ़ाइल

जेएस फ़ाइल में आपको कुछ बदलाव करने होंगे, मैं नीचे इनका विस्तार करूँगा।

define(['ko', 'uiComponent'], function(ko, Component) {
    'use strict';

    return Component.extend({
        defaults: {
            exampleMessage: 'Hello?',
            template: 'Magento_Cms/test'
        },

        initialize: function() {
            this._super();
            console.log(this.exampleMessage);
            this.message = ko.observable(this.exampleMessage);
        }
    });
});

1 - आपका रिटर्न फ़ंक्शन अब uiComponent मॉड्यूल को विस्तारित करने की आवश्यकता है:

return Component.extend({
    ...
});

2 - आपको एक initializeफ़ंक्शन जोड़ने और कॉल करने की आवश्यकता है this._super()। this._super()एक ही नाम के साथ मूल घटक के फ़ंक्शन को कॉल करेगा। इस उदाहरण में तो मैं लगता है कि यह फोन करेगा initializeकी uiComponent।

initialize: function() {
    this._super();
    ...
}.

3 - वैकल्पिक - आप यहां अपने घटक के लिए कुछ चूक भी निर्धारित कर सकते हैं, मुझे लगता है कि यह पालन करने के लिए एक अच्छा अभ्यास है क्योंकि यह आपके घटक के साथ काम करना आसान बनाता है। जब आप इसे पुन: उपयोग करते हैं तो आप या तो चूक रख सकते हैं या यदि आप इसे अनुकूलित करना चाहते हैं तो आप घटक को बदल दिए बिना इसे नए तर्कों के साथ कह सकते हैं।

उदाहरण के लिए, यदि आप जे एस में चूक को देखो यह सेट exampleMessageकरने के लिए 'Hello?'अभी तक पेज के रूप में पाठ प्रदर्शित हो रहा है Hello Magento Stack Exchange!। इसका कारण यह है कि मैंने exampleMessagePHTML फ़ाइल में ओवरराइट किया है जब मैंने घटक को बुलाया है।

HTML टेम्पलेट

मैं अभी भी आसपास खुदाई कर रहा हूं और देख रहा हूं कि एचटीएमएल टेम्प्लेट क्या करने में सक्षम हैं, मैं जानता हूं कि नॉकआउट जेएस प्रलेखन पर बताई गई विशेषताओं का उपयोग यहां किया जा सकता है, जिससे उन्हें काफी लचीला बनाया जा सके।

मैंने अभी के लिए कुछ लोरेम इप्सम पाठ जोड़ा है, मैं एक बार एक और प्रश्न / उत्तर प्रदान करूँगा कि मुझे पता चल गया है कि HTML टेम्पलेट क्या कर सकते हैं।

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda beatae blanditiis culpa cupiditate doloremque, expedita ipsum iure magni minima modi molestiae nulla optio porro ratione reiciendis repellat soluta voluptatum!

परिणाम, और चूक को अधिलेखित करना

जैसा कि पहले उल्लेख किया गया है कि आप देख सकते हैं कि मैंने exampleMessageटेम्प्लेट के भीतर ओवरराइट कर दिया है, आप इसे पाठ के रूप में काम करते हुए देख सकते हैं Hello Magento Stack Exchange।

यदि मैं टेम्पलेट फ़ाइल में ओवरराइड हटाता हूं तो exampleMessageवह डिफ़ॉल्ट रूप से वापस आ जाएगी Hello?। हालांकि मुझे इसे हटाने var/view_preprocessedऔर pub/static/frontendबदलने की आवश्यकता थी । मुझे लगता है कि Magento के मूल्य को कैश किया गया था।

Comments

यह Magento2.1 में काम करेगा

— वेंकट

@ वेंकट - क्या आपका मतलब है कि आप नोड को साफ करने के बिना अब आसानी से नॉकआउट का उपयोग कर सकते हैं? या कि मेरा फिक्स 2.1 में काम करता है?

— बेन क्रूक

2.1 में काम करेगा आपका फिक्स?

— वेंकट

मेरे लिए बाइंडिंग काम किया है, लेकिन पहले इनपुट डेटा के लिए हो रही संदर्भ त्रुटि बंधन

— वेंकट

मुझे लगता है कि जैसा कि नॉकआउट जेएस 2.0.X के बाद से बहुत बदल गया है नहीं लगता है - मैंने इसे 2.1 में आजमाया नहीं है, हालांकि मैं 100% निश्चित नहीं हूं। यह भी सुनिश्चित करें कि आप कुछ पूरी तरह से परीक्षण कर रहे हैं क्योंकि मुझे यकीन नहीं है कि यह सबसे अच्छा तरीका है, यह केवल एक ही है जो मुझे मिल सकता है।

— बेन क्रुक

Answer 2

https://github.com/seeni9589/Magento2/tree/master/Smart/Feedback

कस्टम फीडबैक नॉकआउट js के साथ बनता है। आशा है ये मदद करेगा।