ম্যাজেন্টো 2 এর মধ্যে নকআউট জেএস কীভাবে ব্যবহার করবেন

Question

আমার সমস্যা:

আমি ম্যাজেন্টো 2-এর মধ্যে একটি ছোট নকআউট জেএস অ্যাপ্লিকেশন লেখার চেষ্টা করছি, আমি যখন অ্যাপ্লিকেশনটি ব্যবহার করব তখন ko.applyBindings(AppViewModel, document.getElementById("koTest"));ম্যাজেন্টো দ্বারা ব্যবহৃত নকআউটটি ভেঙে এই ত্রুটিটি ছুঁড়ে ফেলার চেষ্টা করছি :

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

আমি সন্দেহ করি কারণ এটি:

আমি সন্দেহ করি কারণ এটি ম্যাজেন্টো 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

এখানে একটি টিউটোরিয়াল রয়েছে: ইঞ্চি.নো.মেজেন্টো ২২

— অ্যারন অ্যালেন

Answer 1

এমন সহজ পদ্ধতি যেখানে আপনার এইচটিএমএল টেমপ্লেটগুলি ব্যবহার করার দরকার নেই

বিনয় কপ্পকে ধন্যবাদ আমি অবশেষে এর উত্তর পেয়েছি, এটি আমার আগের হ্যাকি ওয়ার্কারআউন্ডের চেয়ে অনেক সহজ (আমি নোডগুলি পরিষ্কার করছিলাম)। আপনাকে যা করতে হবে তা হ'ল 'ko'নির্ভরতা হিসাবে সংজ্ঞায়িত করা এবং একটি রিটার্ন ফাংশনের অভ্যন্তরে আপনার কোড যুক্ত করা।

নীচে একটি সাধারণ উদাহরণ যা জেএসএনের মাধ্যমে পাস করা কিছু পাঠ্যকে রেন্ডার করে।

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

এখানে আমরা ম্যাজেন্টোকে আমাদের উপাদানগুলির ব্যাপ্তিটি বলি (এটি অবশ্যই data-bind: "scope: 'example-scope'"কোনও অতিরিক্ত ডেটা মেলতে এবং পাস করতে হবে This এটি বেস URL হতে পারে, একটি সাধারণ বার্তা, আপনার পছন্দসই যে কোনও কিছুই I've উদাহরণ হিসাবে আমি একটি স্ট্রিং (পিএইচপি প্রতিধ্বনি) পাস করেছি I've

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

 ফলাফল

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

আপনার এইচটিএমএল টেমপ্লেটগুলি ব্যবহার করার প্রয়োজন যেখানে পদ্ধতি

আপনি যদি ম্যাজেন্টো 2 / নকআউটের মধ্যে এইচটিএমএল টেম্প্লেটিং সিস্টেমটি ব্যবহার করতে চান (যা আমি মনে করি যে আপনার কাজের কোনও উল্লেখযোগ্য অংশের প্রয়োজন হবে) আপনার সরল উত্তরের (নীচে) তুলনায় আপনাকে কিছু পরিবর্তন করতে হবে।

আপনার যদি টেমপ্লেটের কার্যকারিতা প্রয়োজন না হয় তবে আমার পুরানো সরলিকৃত উত্তরে স্ক্রোল করুন।

এই উদাহরণের জন্য আমি যে ফাইলগুলি ব্যবহার করছি তা হ'ল:

• 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

পিএইচটিএমএল টেম্পলেট ফাইল

আমাদের পিএইচটিএমএল টেমপ্লেটে একমাত্র পরিবর্তন হ'ল ফাংশনটিতে কল 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 - আপনার রিটার্ন ফাংশনটির এখন ui কম্পোনেন্ট মডিউলটি প্রসারিত করতে হবে:

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

2 - আপনার একটি initializeফাংশন এবং কল যুক্ত করতে হবে this._super()। this._super()একই নামের সাথে প্যারেন্ট উপাদানটির ফাংশনটি কল করবে। এই ইনস্ট্যান্সের মধ্যে তাই আমি মনে করি এটা ডাকব initializeএর uiComponent।

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

3 - alচ্ছিক - আপনি এখানে আপনার উপাদানগুলির জন্য কিছু ডিফল্টও সেট করতে পারেন, আমি মনে করি এটি অনুসরণ করা ভাল অভ্যাস যা এটি আপনার উপাদানটিকে কাজ করা সহজ করে তোলে। আপনি যখন এটি পুনঃব্যবহার করেন আপনি হয় হয় ডিফল্ট রাখতে পারেন বা আপনি যদি এটি কাস্টমাইজ করতে চান তবে উপাদানটি পরিবর্তন না করেই নতুন যুক্তি দিয়ে কল করতে পারেন।

উদাহরণস্বরূপ, আপনি যদি জেএসের ডিফল্টগুলি লক্ষ্য করেন তবে এটি পৃষ্ঠাটি সেট exampleMessageকরে 'Hello?'এখনও এটি পাঠ্যটিকে রেন্ডার করে Hello Magento Stack Exchange!। কারণ আমি exampleMessageযখন উপাদানটি কল করেছি তখন আমি পিএইচটিএমএল ফাইলটিতে ওভাররাইট করেছি।

এইচটিএমএল টেমপ্লেট

আমি এখনও খনন করতে এবং এইচটিএমএল টেমপ্লেটগুলি সক্ষম কি তা দেখতে পাচ্ছি, আমি অনুমান করি নকআউট জেএস ডকুমেন্টেশনে উল্লিখিত বৈশিষ্ট্যগুলি এগুলিকে বেশ নমনীয় করে তুলতে এখানে ব্যবহার করা যেতে পারে।

আমি আপাতত কিছু লোরেম আইপসাম পাঠ্য যুক্ত করেছি, এইচটিএমএল টেমপ্লেটগুলি কী করতে পারে তা আমি একবার বের করে ফেললে আমি সম্ভবত আরও একটি প্রশ্ন / উত্তর সরবরাহ করব।

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পরে এটি পরিবর্তন করার পরে আমার দরকার ছিল না। আমি মনে করি ম্যাজেন্টো মানটি ক্যাশে করেছিল।

Comments

এটি Magento2.1 এ কাজ করবে

— ভেঙ্কট

@ ভেনক্যাট - আপনি কী বোঝাতে চাইছেন আপনি নোড পরিষ্কার না করেই সহজেই নকআউট ব্যবহার করতে পারবেন? বা আমার ফিক্সটি 2.1 এ কাজ করে?

— বেন ক্রুক

আপনার ফিক্সটি 2.1 এ কাজ করবে?

— ভেঙ্কট

আমার জন্য বাইন্ডিংগুলি কাজ করা হয়েছে তবে প্রথম ইনপুট ডেটা বাঁধাইয়ের জন্য রেফারেন্স ত্রুটি পেয়েছে

— ভেঙ্কট

আমি মনে করি যে নকআউটজেএস ২.০. এক্স থেকে খুব বেশি পরিবর্তন হয়েছে বলে মনে হচ্ছে না - আমি এটি ২.১-তে চেষ্টা করে দেখিনি যদিও আমি ১০০% নিশ্চিত নই। এটি নিশ্চিত করে নিন যে আপনি কিছু নিখুঁতভাবে পরীক্ষা করেছেন যেহেতু আমি নিশ্চিত নই যে এটি সর্বোত্তম পদ্ধতি কিনা, তবে এটিই আমি খুঁজে পেতে পারি।

— বেন ক্রুক

Answer 2

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

নকআউট জেএস সহ কাস্টম প্রতিক্রিয়া ফর্ম। আশা করি এটা সাহায্য করবে.