उन्नत जावास्क्रिप्ट - लूप का उपयोग करके HTML में Json डेटा की सूची बनाएं और रिवीलिंग पैटर्न का उपयोग करके एक तत्व परिवर्तन घटना को ट्रिगर करें

Question 1

मैंने एक वास्तविक समस्या का एक कामकाजी उदाहरण लिखा है जिसे मैं हल करने की कोशिश कर रहा हूं

मैंने डेटाबेस से मेरे पास json रिटर्न का अनुकरण करते हुए एक ऑब्जेक्ट बनाया है

मुझे चाहिए:

सूची अनुबंध और अनुबंध बैच
फ़ंक्शन में प्रवेश करते समय, अनुबंध के अंतिम बैच को ड्रॉप-डाउन सूची में चयनित के रूप में चिह्नित करें
फ़ंक्शन में प्रवेश करते समय, केवल ul-invoices तत्व में चयनित अनुबंध के अंतिम batch के चालान प्रदर्शित करें।
बैच बदलते समय संबंधित चालान लोड करें और प्रदर्शित करें

समस्याएं:

मैं चयनित अनुबंध के अंतिम बैच के लिए चालान सूचीबद्ध नहीं कर सकता
हालांकि onchange="getInvoices" के लिए एक फ़ंक्शन है, मैं हमेशा getInvoices is not defined

नोट:

पृष्ठ में प्रवेश करते समय, मेरे पास पहले से ही चयनित अनुबंध की जानकारी है, उदाहरण के मामले में, मैंने अनुबंध को ID 1 के साथ छोड़ दिया है।
उदाहरण में मैं चयनित अनुबंध को परिभाषित करने के लिए in-attendance वर्ग का उपयोग कर रहा हूं
मैं Revealing Pattern का उपयोग कर रहा हूं और मैं इस पैटर्न को बनाए रखना चाहता हूं

<html>
    <label id="contracts"></label>
    <ul id="ul-invoices"></ul>
    
    <script>
        let lblContract = document.querySelector('#contracts');
        let UlInvoices = document.querySelector('#ul-invoices');
        
        let contractInAttendance = 1;
        
        const objectContract = {
            id: 1,
            nome: 'wagner',
            contracts: [{
                id: 1,
                contract: '123456',
                batches: [ {
                    id: 1,
                    contract_id: 1,
                    batch: '1',
                    invoices: [ {
                        value: 10,
                        batch_id: 1,
                    }]
                },
                {
                    id: 2,
                    contract_id: 1,
                    batch: '2',
                    invoices: [{
                        value: 10,
                        batch_id: 2,
                    }]
                }]
            },
            {
                id: 2,
                contract: '246789',
                batches: [ {
                    id: 3,
                    contract_id: 2,
                    batch: '1',
                    invoices: [ {
                        value: 20,
                        batch_id: 3,
                    }]
                }]
            }]
        }
        
        const revelling = (function() {
        
            function privateInit() {
                const contracts = objectContract.contracts;
                let contractFilteredById = contracts.filter(contract => contract.id === contractInAttendance);
                
                for (const contract of contracts) {
                    const selectedContract = contract.id === contractFilteredById[0].id ? 'in-attendance' : '';
                    
                    //let batchFilteredById = contract.batches.filter(batch => batch.id === batchInAttendance);
                
                    let htmlForBatchsOptions = contract.batches.map(batch => `<option value=${batch.id}>${batch.batch}</option>`).join('');
                    lblContract.innerHTML +=
                    `<div class="contract-${selectedContract}" style="display: flex;">
                        <div id="contract-${contract.contract}" data-contract="${contract.id}" class="loren">
                            <span>${contract.contract}</span>
                        </div>
                        <div class="ipsulum" style="margin-left: 5px;">
                            <select class="sel-batch" onchange="getInvoices(this)">
                                ${htmlForBatchsOptions}
                            </select>
                        </div>
                    </div>`;
                    
                    const batchOption = document.querySelector('select.sel-batch');
                    batchOption.value = 2;
                    
                    /!* create method for load invoices */
                    
                }
            }
            
            /!* Method fix for load invoices onchange sel-batch */
            function getInvoices(selectObject) {
                console.log('populate invoices element #ul-invoices');
            }
            
            return {
               init: privateInit()
            }
            
        })();
        revelling.init;
    </script>
    
</html>

javascript

2

Wagner Fillio 9 जुलाई 2020, 00:07

Answer

इस पैटर्न में आईआईएफई फ़ंक्शन उस विधि को getInvoices निजी बनाता है, इसलिए आप इस तरह से एक हैंडलर नहीं जोड़ सकते, क्योंकि यह एक वैश्विक विधि खोजने की कोशिश कर रहा है जो मौजूद नहीं है।

आपको इवेंट हैंडलर को इस तरह असाइन करने की आवश्यकता है:

      lblContract.innerHTML +=
        `<div class="contract-${selectedContract}" style="display: flex;">
                        <div id="contract-${contract.contract}" data-contract="${contract.id}" class="loren">
                            <span>${contract.contract}</span>
                        </div>
                        <div class="ipsulum" style="margin-left: 5px;">
                            <select class="sel-batch">
                                ${htmlForBatchsOptions}
                            </select>
                        </div>
                    </div>`;

      const batchOption = lblContract.querySelector('select.sel-batch');
      // The event listener holds a reference to the inner function
      batchOption.addEventListener("change", getInvoices);

1

David Rissato Cruz 9 जुलाई 2020, 03:41

Question 2

इस पैटर्न में आईआईएफई फ़ंक्शन उस विधि को getInvoices निजी बनाता है, इसलिए आप इस तरह से एक हैंडलर नहीं जोड़ सकते, क्योंकि यह एक वैश्विक विधि खोजने की कोशिश कर रहा है जो मौजूद नहीं है।

आपको इवेंट हैंडलर को इस तरह असाइन करने की आवश्यकता है:

      lblContract.innerHTML +=
        `<div class="contract-${selectedContract}" style="display: flex;">
                        <div id="contract-${contract.contract}" data-contract="${contract.id}" class="loren">
                            <span>${contract.contract}</span>
                        </div>
                        <div class="ipsulum" style="margin-left: 5px;">
                            <select class="sel-batch">
                                ${htmlForBatchsOptions}
                            </select>
                        </div>
                    </div>`;

      const batchOption = lblContract.querySelector('select.sel-batch');
      // The event listener holds a reference to the inner function
      batchOption.addEventListener("change", getInvoices);

1

David Rissato Cruz 9 जुलाई 2020, 03:41

1 उत्तर

संबंधित सवाल

नए सवाल