परिचय

HMX एक शक्तिशाली जावास्क्रिप्ट लाइब्रेरी है जो आपको न्यूनतम जावास्क्रिप्ट के साथ गतिशील वेब अनुप्रयोगों को बनाने की अनुमति देता है. यह आपको AJJJAX निवेदन, HTML सामग्री, और सीधे आपके HTML गुणों में घटनाओं को संचालित करने के लिए सक्षम करता है. मैं HMX का प्रयोग कर रहा हूँ इस बिंदु पर और हर परियोजना के बारे में और अधिक सीखने के लिए, और अधिक सक्षमता के बारे में और अधिक महत्वपूर्णता.

लेकिन मैं अभी भी इसके बारे में निपुण ज्ञान रखने का दावा नहीं करता. मैं बस उन चीजों में से कुछ हिस्सा लेना चाहता था जो मैंने इस तरह सीखा है.

मित्र आलेख: इस लेख में HMMAX की घटना प्रणाली, विस्तार, और विस्तृत व्यवस्था पर ध्यान दिया गया है. एचएसईएसई के साथ एटीएमएक्स.नेटए कोर आंशिकता: सर्वर- अप- ओएस.

घटनाएँ

निवेदन तैयारी

निवेदन नियत चरण है जहाँ सर्वर को भेजा जाना है. इसमें शीर्षकों को सेट करना, पैरामीटर जोड़ना तथा उपयोक्ता इनपुट को नियंत्रित करना शामिल है. निम्न घटनाएँ इस चरण के दौरान नियत होती हैं:

flowchart LR

        A[htmx:configRequest] --> B[htmx:confirm] --> C[htmx:prompt] --> D[htmx:abort]

जीवन - साथी की गुज़ारिश

निवेदन यह है कि HMMMX सर्वर को निवेदन भेजता है और प्रतिक्रियाओं को संभालता है. निम्न घटनाएँ इस चरण के दौरान शुरू होती हैं:

flowchart LR
 E[htmx:beforeRequest] --> F[htmx:request] --> G[htmx:afterRequest]

अनुक्रिया हैंडलिंग

प्रतिक्रिया नियंत्रण चरण है जहां HMMMX प्रक्रिया सर्वर से प्रतिक्रियाओं को अद्यतन करता है और डोम को अद्यतन करता है. निम्न घटनाएँ इस चरण के दौरान उत्पन्न होती हैं:

flowchart LR
        H[htmx:beforeOnLoad] --> I[htmx:onLoad]
        I --> J[htmx:beforeSwap] --> K[htmx:swap] --> L[htmx:afterSwap]
        L --> M[htmx:afterSettle] --> N[htmx:afterOnLoad]

इतिहास प्रबंधन

इतिहास प्रबंधन चरण है जहां HMSX ब्राउज़र इतिहास और यूआरएल अद्यतन करता है. निम्न घटनाएँ इस चरण के दौरान शुरू होती हैं:

flowchart LR
 A[htmx:historyRestoreRequest]
 A --> B[htmx:historyPopped]
 B --> C[htmx:historyRestorePage]

जैसा कि आप HMMMX कई घटनाओं को देख सकते हैं जो आप निवेदन या प्रतिक्रिया, या इतिहास को परिवर्धित कर सकते हैं, HMMX एक ऐसी वाचा प्रणाली होने के लिए है. इन में से प्रत्येक का उपयोग आप कर सकते हैं कि सर्वर / उच्च गति से सक्षम तरीके से सर्वर के साथ कैसे व्यवहार करता है.

विस्तार

HMAX के सबसे शक्‍तिशाली पहलू में से एक है विस्तार अपनी क्षमताओं को विस्तार करने के लिए. मेरे मामले में, मैं आम तौर पर हुक में htmx:configRequest निवेदन में अतिरिक्त पैरामीटर्स जोड़ने के लिए. यह उपयोगी है जब आप HTML या जावास्क्रिप्ट कोड को संशोधित करना चाहते हैं तो यह उपयोगी है.

अन्य विस्तार हुक हो सकता है htmx:beforeRequest भेजने से पहले निवेदन को परिवर्धित करें, लेकिन पश्चात अन्य विस्तार जो हुक configRequest; जैसा कि में beforeRequest जैसे सामान HX-Vals और HX-IncludeS पहले से ही रीस्ट में जोड़े गए हैं (यदि सक्रिय किया जा रहा है\ क्वैरी वाक्यांश में). आप भी हुक कर सकते हैं htmx:afterSwap वस्तुओं के बदलने के बाद क्रियाएँ करने के लिए. क्लाएंट पारिंग लाइब्रेरी के साथ जोड़ दिया गया है जैसे कि यू. एस. या लि. आप न्यूनतम कोड के साथ शक्तिशाली गतिशील अनुप्रयोगों को बना सकते हैं.

HMAX कुछ निर्मित विस्तार प्रदान करता है जैसे hx-boost और hx-swap-oob जो आपको HMAX के कार्य को बिना किसी मनपसंद कोड को लिखने की अनुमति देता है. लेकिन, जब आपको विशिष्ट माँगों को पूरा करने के लिए अपने स्वयं विस्तार को तैयार करने की ज़रूरत होती है, तब समय आ जाता है.

उदाहरण के लिए, आप अपने निवेदन में मनपसंद शीर्षिका को जोड़ना चाहते हैं, निवेदन को परिवर्धित करें, या विशिष्ट घटनाओं को किसी विशिष्ट तरीके से हैंडल करना चाहेंगे.

इस HMMAX प्राप्त करने के लिए आप कुछ हाथ युक्त मुद्दों को प्रदान करते हैं:

{
  /**
   * init(api)
   * Called once when the extension is initialized.
   * Use it to set up internal state, store references, or access HTMX utility functions via the api parameter.
   */
  init: function(api) {
    return null;
  },

  /**
   * getSelectors()
   * Returns additional CSS selectors that HTMX should monitor.
   * Useful if your extension needs to handle custom elements or dynamic behavior.
   */
  getSelectors: function() {
    return null;
  },

  /**
   * onEvent(name, evt)
   * Called on every HTMX event (e.g., htmx:beforeRequest, htmx:afterSwap).
   * Return false to cancel the event or stop propagation.
   */
  onEvent: function(name, evt) {
    return true;
  },

  /**
   * transformResponse(text, xhr, elt)
   * Modify the raw response text before it is parsed and swapped into the DOM.
   * Use this to sanitize or preprocess HTML.
   */
  transformResponse: function(text, xhr, elt) {
    return text;
  },

  /**
   * isInlineSwap(swapStyle)
   * Return true if your extension will handle this swap style manually.
   * This tells HTMX to skip default behavior.
   */
  isInlineSwap: function(swapStyle) {
    return false;
  },

  /**
   * handleSwap(swapStyle, target, fragment, settleInfo)
   * Perform custom DOM manipulation if you implement a custom swap style.
   * Return true to prevent HTMX's default swap.
   */
  handleSwap: function(swapStyle, target, fragment, settleInfo) {
    return false;
  },

  /**
   * encodeParameters(xhr, parameters, elt)
   * Modify or serialize request parameters before sending.
   * Return null to use default URL/form encoding.
   * Return a string to override with a custom payload (e.g., JSON).
   */
  encodeParameters: function(xhr, parameters, elt) {
    return null;
  }
}

HMAX कई विस्तार विस्तार विस्तार विस्तार विस्तार प्रदान करता है आप कर सकते हैं यहाँ के बारे में पढ़ें.

उदाहरण के लिए एक्सटेंशन गुम है json-encode URL-ened फ़ॉर्म डाटा के बजाए JSON डाटा को निवेदन शरीर में भेजने की अनुमति देता है. यह उपयोगी है जब आप जटिल डाटा संरचनाओं या ऐक्सेस भेजने के लिए चाहते हैं. आप देख सकते हैं कि यह घेरा 3 घटनाओं में डाला गया है

• init - विस्तार सेट करने और HMAX एपीआई के लिए एक संदर्भ सेट करने के लिए
• onEvent - सेट करने के लिए Content-Type शीर्षिका को application/json जब निवेदन विन्यस्त किया जा रहा हो
• encodeParameters - डिफ़ॉल्ट यूआरएल-enकोड फ़ॉर्म एनकोडिंग को ओवरराइड करने के लिए तथा पैरामीटरों को JSON के रूप में सीरियल करने के लिए एक वाक्यांश लौटाता है. यह डिफ़ॉल्ट यूआरएल-end एनकोडिंग इस्तेमाल से बचने के लिए HMMSX को भी लौटाता है.

(function() {
  let api
  htmx.defineExtension('json-enc', {
    init: function(apiRef) {
      api = apiRef
    },

    onEvent: function(name, evt) {
      if (name === 'htmx:configRequest') {
        evt.detail.headers['Content-Type'] = 'application/json'
      }
    },

    encodeParameters: function(xhr, parameters, elt) {
      xhr.overrideMimeType('text/json')

      const object = {}
      parameters.forEach(function(value, key) {
        if (Object.hasOwn(object, key)) {
          if (!Array.isArray(object[key])) {
            object[key] = [object[key]]
          }
          object[key].push(value)
        } else {
          object[key] = value
        }
      })

      const vals = api.getExpressionVars(elt)
      Object.keys(object).forEach(function(key) {
        // FormData encodes values as strings, restore hx-vals/hx-vars with their initial types
        object[key] = Object.hasOwn(vals, key) ? vals[key] : object[key]
      })

      return (JSON.stringify(object))
    }
  })
})()

या फिर वह आसान भी हो गया है लेकिन उससे भी ज़्यादा हागा है hx-debug एक्सटेंशन जो एक जोड़ता है HX-Debug निवेदन में शीर्षक. यह डिबगिंग और लॉगिंग उद्देश्‍य के लिए उपयोगी है, क्योंकि यह आपको dev कंसोल में रॉ निवेदन और प्रतिक्रिया डेटा को देखने देता है.

(function() {
  htmx.defineExtension('debug', {
    onEvent: function(name, evt) {
      if (console.debug) {
        console.debug(name, evt)
      } else if (console) {
        console.log('DEBUG:', name, evt)
      } else {
        throw new Error('NO CONSOLE SUPPORTED')
      }
    }
  })
})()

वहाँ बहुत अधिक है; एक बहुत शक्तिशाली भी है क्लाएंट साइड ग्रुपिंग विस्तार जो आपको क्लाएंट- साइड रिलिंग लाइब्रेरी का उपयोग करने की अनुमति देता है JSON डाटा को एचटीएमएल में परिवर्तित करने के लिए. यह गतिशील यूआईों को बनाने के लिए उपयोगी है बिना सर्वर के किनारे पर भरोसा करने के लिए.

कुछ मनपसंद विस्तार

गतिशील पंक्ति आईडी

हाल ही में एक परियोजना में मैंने HMAXOB की मदद से एक मेज़ पर कई पंक्तियों का अद्यतन करने के लिए प्रयोग किया. ऐसा करने के लिए मैं जानना चाहता था कि कौन सी पंक्ति वर्तमान में प्रदर्शित की जा रही है, इसलिए मैं केवल उन पंक्तियों को अद्यतन किया जो दृश्‍य थीं ।

एक्सटेंशन

export default {
    encodeParameters: function (xhr, parameters, elt) {
        const ext = elt.getAttribute('hx-ext') || '';
        if (!ext.split(',').map(e => e.trim()).includes('dynamic-rowids')) {
            return null; // Use default behavior
        }

        const id = elt.dataset.id;
        const approve = elt.dataset.approve === 'true';
        const minimal = elt.dataset.minimal === 'true';
        const single = elt.dataset.single === 'true';

        const target = elt.dataset.target;
        const payload = { id, approve, minimal, single };

        if (approve && target) {
            const table = document.querySelector(target);
            if (table) {
                const rowIds = Array.from(table.querySelectorAll('tr[id^="row-"]'))
                    .map(row => row.id.replace('row-', ''));
                payload.rowIds = rowIds;
            }
        }

        // Merge payload into the parameters object
        Object.assign(parameters, payload);
        return null; // Return null to continue with default URL-encoded form encoding
    }
}

इसका उपयोग कर रहा है

इसका उपयोग करने के लिए हमें अपने HMMMX कॉन्फ़िगरेशन में विस्तार जोड़ने की जरूरत है. तो अपनी प्रविष्टि में बिंदु जे (जैसे कि आप मॉड्यूल का उपयोग कर रहे हैं; योयय होना चाहिए) आप इस तरह से कुछ कर सकते हैं:

import dynamicRowIds from "./dynamicRowIds"; // Load the file

htmx.defineExtension("dynamic-rowids", dynamicRowIds); // Register the extension

फिर जिस वस्तु पर आप उसका उपयोग करना चाहते हैं उस पर आप उसे जोड़ सकते हैं hx-ext मूल्य के साथ गुण dynamic-rowids.

                <button
                    hx-ext="dynamic-rowids"
                    data-target="#my-table"
                    data-id="@Model.Id"
                    data-param1="true"
                    data-param2="false"
                    data-param3="@Model.Whatever"
                    hx-post
                    hx-controller="Contoller"
                    hx-action="Action"
                >
                    <i class='bx bx-check text-xl text-white'></i>
                </button>

प्रतियों को संरक्षित करें

यह एक और सरल HMMAX विस्तार है, इस समय में प्रवेश कर रहा है htmx:configRequest जैसा कि हम निवेदन के भेजे जाने से पहले यूआरएल को संशोधित कर रहे हैं. यह विस्तार है यदि आप क्वैरी वाक्यांश फिल्टर आदि का उपयोग कर रहे हैं और आप कुछ मौजूदा फ़िल्टर संरक्षित करना चाहते हैं (जैसे कि 'जैसे कि, नाम, नाम, और' प्रारंभ नहीं होता है).

यह SMILILARAR के लिए है लेकिन बिल्कुल वैसा नहीं है जैसा मौजूदा HMAX विस्तार पुश-पार्स

एक्सटेंशन

आप हम हुक देख सकते हैं कि onEvent सुनने के लिए htmx:configRequest कार्यक्रम.

तब हम:

• घटना ट्रिगर करता है कि तत्व प्राप्त करें
• जाओ preserve-params-exclude तत्व से गुण (यदि मौजूद हो) और अलग करने के लिए कुंजी के एक समूह में विभाजित करें (इसलिए हम उन्हें अनुरोध में जोड़ नहीं सकते)
• विंडो स्थान से मौजूदा यूआरएल पैरामीटर्स को प्राप्त करें
• निवेदन यूआरएल से नया पैरामीटर प्राप्त करें
• मौजूदा पैरामीटर्स के माध्यम से लूप तथा जांच करें यदि वे अलग सूची में नहीं हैं और पहले से ही नए पैरामीटर में नहीं है
• यदि वे नहीं हैं, तो हम उन्हें नए पैरामीटर्स पर जोड़ते हैं
• आखिर में हमने नया पैरामीटर्स निवेदन URL में रखा और निवेदन जारी रखने के लिए सही वापस आ गया ।

export default {
    onEvent: function (name, evt) {
        if (name !== 'htmx:configRequest') return;
        const el = evt.detail.elt;
        const excludeStr = el.getAttribute('preserve-params-exclude') || '';
        const exclude = excludeStr.split(',').map(s => s.trim());

        const currentParams = new URLSearchParams(window.location.search);
        const newParams = new URLSearchParams(evt.detail.path.split('?')[1] || '');

        currentParams.forEach((value, key) => {
            if (!exclude.includes(key) && !newParams.has(key)) {
                newParams.set(key, value);
            }
        });

        evt.detail.path = evt.detail.path.split('?')[0] + '?' + newParams.toString();

        return true;
    }
};

यहाँ मैं आवश्यक उपयोग एचएसएमएक्स.Net उसके टैग सहायकों के लिए. hx-controller और hx-action टैग सहायक हैं जो आपके लिए सही HMSX गुण तैयार करते हैं. साथ ही साथ hx-route-<x> पथ में पास करने के लिए मान. यह वास्तव में उपयोगी है क्योंकि यह आपको सी# कोड का उपयोग करने की अनुमति देता है क्योंकि यह आपके HTML में इन गुणों के लिए सही मान उत्पन्न करने देता है.

इसका उपयोग कर रहा है

एक एक्सटेंशन के रूप में यह वास्तव में उपयोग करने के लिए सरल है:

पहले हम हमारे HMMMX कॉन्फ़िगरेशन में विस्तार जोड़ने की जरूरत है.

import preserveParams from './preserveParams.js';
htmx.defineExtension('preserve-params', preserveParams);

नोट: आप नोट करेंगे कि डिफ़ॉल्ट HMMMX विस्तार विस्तार विस्तार विस्तार विस्तार का उपयोग विस्तार लोड करने के लिए 'लोड करें' विधि का उपयोग करता है.

// Autoloading the extension and registering it
(function() {
  htmx.defineExtension('debug', {
}

यह करने के लिए एक अच्छा तरीका है अगर आप एक गैर आयामी वातावरण में H6X का उपयोग कर रहे हैं. हालांकि, यदि आप मॉड्यूल का उपयोग कर रहे हैं (जिस से आप होना चाहिए) यह बेहतर है. import एक्सटेंशन लोड करने का कथन तब प्रत्यक्ष रूप से यह आपके खिलाफ रजिस्टर करता है htmx उदाहरण के लिए, यह आप पेड़-शिंग का लाभ लेने की अनुमति देता है और केवल आप की आवश्यकता है.

फिर अपने तत्व पर आप जोड़ सकते हैं hx-ext मूल्य के साथ गुण preserve-params और preserve-params-exclude निवेदन से अलग करने के लिए अल्पविराम से अलग किए गए पैरामीटरों की सूची के साथ गुण.

<a class="btn-outline-icon"
   hx-controller="MyController"
   hx-action="MyAction"
   hx-route-myparam="@MyParam"
   hx-push-url="true"
   hx-ext="preserve-params"
   preserve-params-exclude="page,sort"
   hx-target="#page-content"
   hx-swap="innerHTML show:top"
   hx-indicator>
    <i class="bx bx-search"></i>
</a>

इस मामले में event.detail.path नया हो गया myparam मूल्य यह इस में सेट होगा कि एक को हमारे नए मूल्य से प्रतिस्थापित करेगा लेकिन सभी अन्यों को बचाने के लिए (सिर्फ) page और sort. तो हम किसी भी फिल्टर को पारित कर सकते हैं हम यूआरएल में सेट कर सकते हैं सर्वर में सेट कर दिया है के बिना उनके बारे में चिंता करने के लिए जब हम एक नया अनुरोध कर रहे हैं.

यु. पू.

HMMSX के बारे में साफ - सफाई की चीजों में से एक है कि सर्वर के साथ इसके संपर्क का अधिकांश होता है HTTP headers के माध्यम से होता है. ये शीर्षिका आपके अनुरोध के बारे में अमीर संदर्भ प्रदान करते हैं, आप उचित रूप से प्रतिक्रिया देने की अनुमति देते हैं.

इस का कुंजी अवयव फिर से है एचएसएमएक्स.Netइनमें से कई चीज़ें साफ - सफाई में होती हैं Request HMMX निवेदन का पता लगाने के लिए एक्सटेंशन. यह निर्धारित करने के लिए उपयोगी है कि क्या HMAX द्वारा निवेदन किया गया है या नहीं, और इसके अनुसार इसे नियंत्रित करने के लिए.

इसमें ट्रिगर के लिए अपनी खुद की यांत्रिकी भी है

Response.Htmx(h => {
    h.WithTrigger("yes")
     .WithTrigger("cool", timing: HtmxTriggerTiming.AfterSettle)
     .WithTrigger("neat", new { valueForFrontEnd= 42, status= "Done!" }, timing: HtmxTriggerTiming.AfterSwap);
});

दबाएँ यूआरएल खालिस ने विस्तार का एक बहुत बड़ा काम किया है ताकि उसे किसी भी हाल में HMAX के साथ काम करना आसान हो जाए. NENT कोर में.

यह है मेरे औज़ार- बक्से में एक कुंजी उपकरण है जब HMMMX और आएसी के साथ काम करता है. NENT कोर. इसे जाँच लें!

सामान्यHMX आग्रह

यहाँ सबसे उपयोगी शीर्षिका HMAX का फैलाव प्रत्येक निवेदन के साथ भेजता है:

IMSmsg status |----------------------------|------------------------------------------------------------------------------------------------------------------| IMTANTHX-RENT निवेदन के लिए हमेशा सही सेट किया जा रहा है. मध्य भंडार या नियंत्रक में HMAX कॉल का पता लगाने के लिए महान. डोम में लक्ष्य तत्व का आईडी हो सकता है कि प्रतिक्रिया में पलटा लिया जाएगा. INV HX-ट्रिगर तत्व का आईडी जो अनुरोध करता है (उदा. a बटन) Libisofs HX- ट्रिगर तत्व का नाम (जैसे फ़ॉर्म के लिए उपयोगी है). SSLSX- तब तक उपयोगकर्ता पहुँच समाहित करता है. 0x-13 से उपयोक्ता इनपुट समाहित करता है. INBX- मौजूदा URL url जब आग्रह शुरू किया गया था. लॉगिंग और संदर्भों के लिए उपयोगी. बहुतेरे ब्राउज़र URL मौजूदा ब्राउज़र URLs. IMTAN HXH-RERP-RERTE को सही के रूप में प्रेषित किया यदि निवेदन नेविगेशन के बाद इतिहास बहाल हो (जैसे, वापस बटन).

निवेदन एक्सटेंशन्स

मैं इन काफी विस्तृत उपयोग अपने अप्रयोगों में. NMAX के साथ मिला Request.IsHtmx() , Request.IsHtmxBoosted() और Request.IsHtmxNonBoosted() आप आसानी से HMAX निवेदन का पता लगा सकते हैं और उसके अनुसार प्रतिक्रिया दे सकते हैं.

उदाहरण के लिए, मेरे पास एक सरल विस्तार है अनुरोध करने के लिए जो मुझे पता लगाने देता है कि क्या एक निवेदन मेरे मुख्य लक्ष्य है #page-content अगर यह है तो मुझे पता है कि मैं एक पक्षपाती वापस भेज देना चाहिए. टिप्पणी: बहुत से लोग नहीं जानते कि आप 'पूर्ण पृष्ठ' एक आंशिक के रूप में निर्दिष्ट कर सकते हैं, तो यह सिर्फ खाका छोड़ देता है.

        if (Request.PageContentTarget())
        {   
            Response.PushUrl(Request);
            return PartialView("List", vm);
        }
        return View("List", vm);
        
        public static class RequestExtensions
{
        
        public static bool PageContentTarget(this HttpRequest request)
    {
        bool isPageContentTarget = request.Headers.TryGetValue("hx-target", out var pageContentHeader) 
                                   && pageContentHeader == "page-content";
        
        return isPageContentTarget;
    }
    }

अनुक्रिया विस्तार

निवेदन विस्तार के अतिरिक्‍त, आप अनुक्रिया विस्तार का निर्माण भी कर सकते हैं जो क्लाइंट को वापस घटनाओं के लिए भेजना है. यह क्लाएंट साइड घटनाओं को ट्रिगर करने के लिए उपयोगी है.

स्विडीट उदाहरण

उदाहरण के लिए मेरे स्वीजACAt2 एकीकरण में मैं संवाद को चालू करने के लिए सक्षम करता हूँ जो सर्वर से सेट है.

    document.body.addEventListener('sweetalert:close', closeSweetAlertLoader);

यह HMAX ट्रिगर घटना के रूप में सर्वर से ट्रिगर है.

    public static void CloseSweetAlert(this HttpResponse response)
    {
        response.Headers.Append("HX-Trigger" , JsonSerializer.Serialize(new
        {
            sweetalert = "close"
        }));

    }

यह ट्रिगर ट्रिगर होगा sweetalert:close क्लाएंट के किनारे घटना, आपको संवाद बंद करने की अनुमति देता है. आप भी डाटा को क्लाइंट के प्रयोग से पास कर सकते हैं HX-Trigger शीर्षिका. यह आंकड़ा को सर्वर से बाहर जाने के लिए उपयोगी है बिना HTML या जावास्क्रिप्ट कोड को परिवर्धित करने के लिए.

जैसा कि आप देखते हैं कि यह मर चुका है इन घटनाओं के लिए सुनने के लिए आसान है सिर्फ एक घटना श्रोता को शरीर में जोड़ने के द्वारा. मैं विशेष रूप से इस्तेमाल करते हैं क्योंकि यह हमेशा सही तरह से वितरित करता है.

टन दिखाएँ ( _T)

मैं पहले अपने जाम विधि के बारे में लिखा यहाँमैं इस अनुक्रिया विस्तार में ट्रिगर सेट.

    public static void ShowToast(this HttpResponse response, string message, bool success = true)
    {
        response.Headers.Append("HX-Trigger", JsonSerializer.Serialize(new
        {
            showToast = new
            {
                toast = message,
                issuccess =success
            }
        }));

    }

मैं फिर घटना ग्राहक पक्ष में हुक और मेरा फोन showToast फंक्शन.

import { showToast, showHTMXToast } from './toast';

window.showHTMXToast = showHTMXToast;

document.body.addEventListener("showToast", showHTMXToast);

यह फिर मेरे में आमंत्रित कर रहा है showToast फंक्शन और ठीक है, एक जाम दिखाता है, फिर इसके बारे में और अधिक देखते हैं इस लेख में .

export function showHTMXToast(event) {
    const xhr = event?.detail?.xhr;
    let type = 'success';
    let message = xhr?.responseText || 'Done!';

    try {
        const data = xhr ? JSON.parse(xhr.responseText) : event.detail;

        if (data.toast) message = data.toast;
        if ('issuccess' in data) {
            type = data.issuccess === false ? 'error' : 'success';
        } else if (xhr?.status >= 400) {
            type = 'error';
        } else if (xhr?.status >= 300) {
            type = 'warning';
        }

    } catch {
        if (xhr?.status >= 400) type = 'error';
        else if (xhr?.status >= 300) type = 'warning';
    }

    showToast(message, 3000, type);
}

ऑन्टियम

खैर है कि यह है, HMMSX और Aack.EENNr. मैं आशा है कि आप यह उपयोगी और ज्ञान पाया. यदि आपके पास कोई सवाल या टिप्पणी है नीचे टिप्पणी करने के लिए स्वतंत्र महसूस करें.

इस ब्लॉग पर संबंधित लेख

मित्र आलेख

यह लेख एक दो भाग श्रृंखला का हिस्सा है जो कि अप्रिक के साथ एचमएक्स पर दिया गया है. NENT कोर:

1. प्रमाणीकरण अप्रयोगक के साथ - एकीकरण, आंशिक विचार, HMAT, और pance पर ध्यान केंद्रित
2. इस लेख - HMMMX घटनाओं, जीवन - चक्र, विस्तार डिजाइन, और मनपसंद विस्तार में गहरा रूप से पिघलना

अधिक HMX आलेख

• HMAX के साथ निर्गत किया जा रहा है - HMMMX के साथ पटीकरण लागू किया जा रहा है
• प्रमाणीकरण विधि - HMMX निवेदन के लिए कैशिंग योजनाएँ
• अआथ्यता तथा HMMX के साथ स्वतः ताज़ा करें - प्रतिक्रिया के अवयव के लिए एक आमिटल के साथ जोड़ा जा रहा है.
• HMMX के साथ अपनी साइट अधिक एसएपी जैसा बनाना - जावास्क्रिप्ट फ्रेमवर्क के बिना SPAP- समान नेविगेशन
• HX संपादक के लिए स्वलवैट इस्तेमाल किया जा रहा है - HMMX के साथ सुंदर लोड सूचक
• HMMX के साथ स्केल तथा बिगड़ना दिखाएँ - सर्वर-प्रयोगित जाम सूचना

आगे पढ़ा जा रहा है

आधिकारिक HMX दस्तावेज़ीकरण:

• एचएसएमएक्स दस्तावेज़ीकरण - आधिकारिक HMX दस्तावेज़
• एटीएमएक्स घटनाएँ संदर्भ - HMMX घटनाओं की पूरी सूची
• एचएमएमएक्स विस्तार - आधिकारिक HMX विस्तार
• एटीएमएक्स उदाहरण - HMMAX पैटर्न के व्यावहारिक उदाहरण
• एचएलएमएक्स ईएसएसएस - HMMAX तत्त्वज्ञान पर सोचा गया लेख

लाइब्रेरीज़ औज़ार: (T)

• HMAX. NET Git GiB - HMAX.ENT लाइब्रेरी स्रोत कोड
• HMAX. NELCKR - HMAX. Nuo पर पता नहीं
• खाल अबुंग की वेबसाइट - HMAX का निर्माता.
• यू.js दस्तावेज़ीकरण - आधिकारिक एक जिम्मेदारी .js डोंस

संसाधन:

• एचएमएमएक्स डिस्कआरडी - सक्रिय समुदाय समर्थन
• हायपररोंज सिस्टम बुक - हायपरकैप्शन अनुप्रयोगों के निर्माण के बारे में मुफ्त ऑनलाइन बुक