मैं कैसे व्यवस्थापक में रेंडरआउट नॉकआउट के बाद चलाने के लिए कोड को ट्रिगर कर सकता हूं


11

अद्यतन : आप सीधे viewmodels का उपयोग कर सकते हैं। यदि आपको रेंडर के बाद चलाने के लिए कोड को ट्रिगर करने की आवश्यकता है, तो MutationObserver का उपयोग करें। जैसे ही मेरे पास एक अच्छा काम करने का उदाहरण होगा मैं अपना कोड पोस्ट कर दूंगा।

मूल प्रश्न: हमारे पास बहुत सारे फोन-इन ऑर्डर हैं। मैं एक मॉड्यूल पर काम कर रहा हूं जो ऑटो व्यवस्थापक में डेटा को पॉप्युलेट करता है -> ग्राहक -> हमारे सीआरएम समाधान से वेबपी / जोंसप कॉल का उपयोग करके नया बनाता है। इस तरह, Magento में डेटा हमारे द्वारा पहले से ही संग्रहीत डेटा के डुप्लिकेट को हमारे 'मास्टर डेटाबेस' में संग्रहीत नहीं करता है।

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

अगर आपको आश्चर्य होता है कि मैं ऐसा क्यों करूंगा, तो मेरे कोड का एक हिस्सा पॉप हो जाता है और "HEY, THIS PERSON EXISTS ALREADY। क्या आप उनका उपयोग करना चाहते हैं?" और यह आपके द्वारा पहले से टाइप की गई किसी भी चीज़ को हटा देता है और इसे सही जानकारी के साथ बदल देता है। फिर कॉल सेंटर इसे सत्यापित करता है, यद्दा यद्दा।

अब तक मेरे पास जो कोड है, उसे साझा करूंगा, लेकिन इसका काम बहुत सही नहीं है। FYI करें, यह 'onUpdate' ईवेंट को पकड़ने के लिए Abstract को बढ़ाता है। संग्रह आइटम के अंदर संग्रह तक पहुंचने का प्रयास करने के लिए मुझे रेल न करें। मैं onUpdate ईवेंट को पकड़ने के लिए बेहतर तरीके से नहीं आ सकता हूं और अभी भी सभी क्षेत्रों को देख सकता हूं।

मैं यह भी पूरी तरह से समझता हूं कि क्या गलत है, मुझे अभी पता नहीं है कि इसके आसपास कैसे पहुंचा जाए। क्या गलत है मुझे लगता है कि .activate () कॉल से उत्पन्न तत्व तुरंत निम्नलिखित में उपलब्ध होंगे

document.getElementsByClassName ( 'admin__fieldset')

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

मैं डोम अपडेट के लिए jQuery हैक का सहारा नहीं लेना चाहता।

// jsonService variable is available here because it is in the php template render. see
// Stti/Customer/view/adminhtml/templates/javascriptinject.phtml

define(['ko','jquery','underscore','originalAbstract','uiElement', 'uiCollection'], function(ko, $, _, Abstract, Element, Collection) {
    "use strict";

    var theArray = {
        formFields: [],
        getKnockout: (function (ko) {
            return ko;
        })(ko),
        addressButton: null,
        populateFormFields: function () {
            this.formFields = [];

            // Populate the addressButton thinger
            this.addressButton = this.getNewAddressButton();

            var cb = (function(formFields){
                return function (data) {
                    cr(data, formFields);
                }
            })(this.formFields);

            var cr = function (data, formFields) {
                var elems = data.elems();
                for (var i = elems.length - 1; i >= 0; i--) {
                    if (elems[i].hasOwnProperty('uid')) {
                        formFields.push(elems[i]);
                    }
                }
            };

            var fieldsets = document.getElementsByClassName('admin__fieldset');
            for (var i = fieldsets.length - 1; i >= 0; i--) {
                var data = this.getKnockout.dataFor(fieldsets[i]);
                cb(data);
            }

        },
        cleanupAddresses: function () {
            // Remove all addresses
            var fieldsets = document.getElementsByClassName('admin__fieldset');
            for (var i = fieldsets.length - 1; i >= 0; i--) {
                var data = this.getKnockout.dataFor(fieldsets[i]);
                if (data.dataScope.indexOf('data.address') !== -1 && data.childType === 'group') {
                    data.destroy();
                }
            }
        },
        getNewAddressButton: (function () {
            var retVal = null;
            var customerItem = null;

            // Make sure the template is loaded

            var fieldsets = document.getElementsByClassName('admin__page-nav-item');
            for (var i = fieldsets.length - 1; i >= 0; i--) {
                var data = this.getKnockout.dataFor(fieldsets[i]);
                if (data.dataScope === 'data.address') {
                    data.activate();
                } else {
                    customerItem = data;
                }
            }

            // AT THIS POINT, I REALLY WANT KNOCKOUT TO RENDER.  
            fieldsets = document.getElementsByClassName('admin__fieldset');
            for (var i = fieldsets.length - 1; i >= 0; i--) {
                var data = this.getKnockout.dataFor(fieldsets[i]);
                var elems = data.elems();
                if (elems.length === 1 && data.dataScope === 'data.address' && data.index === 'address') {
                    retVal = elems[0];
                }
            }

            // Return the user to the Account Information section
            if (customerItem !== null) {
                //customerItem.activate();
            }

            return retVal;
        }),
        addNewAddress: function () {
            var retVal = null;

            // Use the addressButton to add a child address
            if (this.addressButton) {
                retVal = this.addressButton.addChild();
            }

            this.populateFormFields();

            return retVal;
        },
        onUpdate: function (newValue) {
            if (newValue) {
                this.clearAllFields();
                switch (this.index) {
                    case "email":
                        this.handleEmailBlur(newValue);
                        break;
                    case "constit_id":
                        this.handleConstitBlur(newValue);
                        break;
                }
            }
        },
        handleEmailBlur: function (newValue) {
            // Don't look up anything if the box was cleared out
            if (newValue != null || newValue != '') {
                this.clearAllFields();
                this.makeJsonReq("GetIndividualByEmail?emailaddress=" + newValue + '&callback=?');
            }
        },
        handleConstitBlur: function (newValue) {
            // Don't look up anything if the box was cleared out
            if (newValue != null || newValue != '') {
                this.clearAllFields();
                this.makeJsonReq("GetIndividualByConstit?constit=" + newValue + '&callback=?');
            }
        },
        jQueryByIndex: function (index) {
            function findUIDbyIndex(element) {
                return element.index === index;
            }

            return $('#' + this.formFields.find(findUIDbyIndex).uid);
        },
        makeJsonReq: function (callString) {
            var msg = null;

            $.getJSON(jsonService + callString, (function (localData) {
                    return function (data) {
                        doWork(data, localData);
                    }
                })(this)
            ).done(function () {
                console.log("Json Request Successful");
            }).fail(function () {
                console.log("Json Request Fail");
            }).always(function () {
                if (msg != "") {
                    alert(msg);
                }
            });


            function doWork(individual, localData) {

                // create as many addresses as the individual has
                if (individual != null) {
                    if (individual.NKIUserId != null) {
                        if (individual.NKIUserId != "") {
                            msg = "WARNING! Netforum reports this user has been added to magento with ID " + individual.NKIUserId + ". LOOKUP THE CUSTOMER FIRST AND CONFIRM YOU WANT TO ADD A NEW CUSTOMER!";
                        }
                        //window.location = "/admin";
                    }

                    if (individual.ConstitID != null) {
                        msg = localData.populateFields(individual, localData);
                    }
                    else {
                        msg = "Individual could not be found in NetForum. Verify that this IS a new customer.";
                    }
                }
                else {
                    msg = "Customer's email was not found in netforum. Be sure to use the correct constituent ID if this is an existing customer. A new Netforum customer will be created if it is blank or incorrect.";
                    // prepFormNoUser("constit");

                }
            }

        },
        populateFields: function (individual, localData) {
            // This function is used to get jquerySelector by index

            var getField = localData.jQueryByIndex;

            if (localData.jQueryByIndex('email')) {
                localData.jQueryByIndex('email').val = individual.PrimaryEmailAddress;
            }

            var addresses = null;
            var mageAddresses = [];

            if (individual.Addresses) {
                addresses = individual.Addresses;

                // Populate the form with the addresses
                for (var i = 0; i < addresses.length; i++) {
                    mageAddresses.push(localData.addNewAddress());
                }
debugger;
                var primaryAddress = null;
                for (var i=0; i < addresses.length; i++) {
                    addresses.each(function (e) {
                        try {
                            if (e.IsPrimary) {
                                primaryAddress = e;
                            }

                        } catch (err) {
                            // todo: handle errors
                        }

                        // Populate the billing address if we are on the order screen
                        if (primaryAddress.Id) {
                            if ($('order-billing_address_cxa_key')) {
                                $('order-billing_address_cxa_key').value = primaryAddress.Id;
                                $('order-billing_address_cxa_key').disable();
                            }
                        }
                        if (primaryAddress.Line1) {
                            if ($('order-billing_address_street0')) {
                                $('order-billing_address_street0').value = primaryAddress.Line1;
                            }
                        }
                        if (primaryAddress.City) {
                            if ($('order-billing_address_city')) {
                                $('order-billing_address_city').value = primaryAddress.City;
                            }
                        }
                        if (primaryAddress.Zip) {
                            if ($('order-billing_address_postcode')) {
                                $('order-billing_address_postcode').value = primaryAddress.Zip;
                            }
                        }
                        if (individual.PrimaryPhoneNumber) {
                            if ($('order-billing_address_telephone')) {
                                $('order-billing_address_telephone').value = individual.PrimaryPhoneNumber;
                            }
                        }

                    });
                }
            }

            if (individual.MemberType != null) {
                if ($('group_id')) {
                    var options = $$('select#group_id option');
                    if (individual.MemberType > 0) {
                        options[3].selected = true;
                        $('signup_method').value = "ADMIN-NEWORDER-EXISTING-MEMBER";
                    }
                    else {
                        options[0].selected = true;
                        $('signup_method').value = "ADMIN-NEWORDER-EXISTING-NONMEMBER";
                    }

                    $('signup_method').disable();

                }

                if ($('_accountconstit_id')) {
                    var options = $$('select#_accountgroup_id option');
                    if (individual.MemberType > 0) {
                        options[3].selected = true;
                        $('_accountsignup_method').value = "ADMIN-NEWCUSTOMER-EXISTING-MEMBER";

                    }
                    else {
                        options[0].selected = true;
                        $('_accountsignup_method').value = "ADMIN-NEWCUSTOMER-EXISTING-NONMEMBER";
                    }

                    $('_accountsignup_method').disable();
                }
            }

            if ($('_accountcst_key')) {
                $('_accountcst_key').value = individual.Id;
                $('_accountcst_key').disable();
            }
            if ($('cst_key')) {
                $('cst_key').value = individual.Id;
                $('cst_key').disable();
            }


            if (individual.FirstName) {
                if ($('_accountfirstname')) {
                    $('_accountfirstname').value = individual.FirstName;
                }
                if ($('order-billing_address_firstname')) {
                    $('order-billing_address_firstname').value = individual.FirstName;
                }
            }
            if (individual.LastName) {
                if ($('_accountlastname')) {
                    $('_accountlastname').value = individual.LastName;
                }
                if ($('order-billing_address_lastname')) {
                    $('order-billing_address_lastname').value = individual.LastName;
                }
            }
            if (individual.MiddleName) {
                if ($('_accountmiddlename')) {
                    $('_accountmiddlename').value = individual.MiddleName;
                }
                if ($('order-billing_address_middlename')) {
                    $('order-billing_address_middlename').value = individual.MiddleName;
                }
            }

            if (individual.DateOfBirth) {
                var dob = new Date(parseInt(individual.DateOfBirth.substr(6)));
                var fDob = dob.toString('MM-dd-yyyy');
                if ($('_accountdob')) {
                    $('_accountdob').value = fDob;
                }
            }

            return msg;
        },
        clearAllFields: function () {
            var inputs = $(':input');
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].value = '';
            }

            this.cleanupAddresses();
            this.populateFormFields();
        }
    };

    // Use jQuery to figure out what page we are on.  the body will contain the class matched by name in the
    // view/adminhtml/layout folder
    if ($('body.customer-index-edit').length > 0) {
        return Abstract.extend(theArray);
    }

});

जवाबों:


3

आप Magento कोर द्वारा प्रदान किए गए afterRender कस्टम बाइंडिंग का उपयोग कर सकते हैं ।

यहाँ कोर से एक उदाहरण है। टेम्पलेट जोड़ता है afterRender="setStickyNode"जो ViewModel पर setStickyNode फ़ंक्शन को कॉल करता है ।

यहाँ एक और बुनियादी उदाहरण है:

मेरा टेम्प्लेट:

<div afterRender="doSomething" id="example1">
    <h1>This is a test</h1>
</div>

मेरा दृश्यमॉडल:

return {
    doSomething: function () {
        // Code that will run after id="example1" element is rendered on the page.
    }
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.