परिचय

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

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

घटनाएँ

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

विस्तार

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 - डिफ़ॉल्ट यूआरएल- इन्ड फ़ॉर्म एनकोडिंग को ओवरराइड करने के लिए और पैरामीटर को JSON के रूप में सीरियल करने के लिए. यह डिफ़ॉल्ट यूआरएल-endकोड फ़ॉर्म एनकोडिंग इस्तेमाल से रोकने के लिए वाक्यांश भी लौटाता है.

(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 हम निवेदन भेजा जाने से पहले यूआरएल को संशोधित कर रहे हैं के रूप में. यह एक्सटेंशन है यदि आप क्वैरी स्ट्रिंग आधारित फिल्टर आदि का प्रयोग कर रहे हैं. और आप कुछ मौजूदा फ़िल्टरों को संरक्षित करने के लिए निवेदन करते हैं जबकि अन्य लोग नहीं (जैसे, 'नाम' तथा 'तिथि' तथा 'page' नहीं हैं.

यह 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', {
}

यह करने के लिए एक अच्छा तरीका है अगर आप एक गैर आयामी वातावरण में HMAX का उपयोग कर रहे हैं. लेकिन, यदि आप मॉड्यूल का उपयोग कर रहे हैं (जिसे आप होना चाहिए) यह बेहतर है उपयोग करने के लिए 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___ तो हम किसी भी फिल्टर को पारित कर सकते हैं हम यूआरएल में सेट कर सकते हैं...... हम उनके बारे में चिंता कर रहे हैं जब हम एक नया अनुरोध कर रहे हैं.

यु. पू.

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

इस का कुंजी अवयव फिर से है एचएसएमएक्स.Net___ इनमें से कई चीज़ें साफ - सफाई की जाती हैं Request HMAX निवेदन का पता लगाने के लिए एक्सटेंशन. यह निश्‍चित करने के लिए उपयोगी है कि कोई निवेदन 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 |----------------------------|------------------------------------------------------------------------------------------------------------------| SMTP HX-RERT निवेदन के लिए हमेशा सही सेट करता है. मध्य भंडार या नियंत्रक में HMMX कॉल के लिए महान. भूटान डोम में लक्ष्य तत्व का आईडी हो सकता है कि प्रतिक्रिया में पलटा लिया जाएगा. भूटान INV HX-ट्रिगर तत्व की आईडी जो अनुरोध शुरू होता है (e.g. g) एक बटन. भूटान Libisofs HX- ट्रिगर तत्व का नाम ( फार्म के लिए उपयोगी है. भूटान SSLSX- तब तक उपयोगकर्ता पहुँच समाहित करता है. भूटान IMSX- मौजूदा यूआरएल यूआरएल यूआरएल जब निवेदन प्रारंभ किया गया तो ब्राउज़र URLs. लॉगिंग व संदर्भ के लिए उपयोगी. भूटान IMTAN HXH-RERT-RATE को सही के रूप में प्रेषित किया यदि निवेदन नेविगेशन के बाद इतिहास बहाल हो (उदाहरण के लिए, बैकअप). भूटान

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

मैं इन काफी विस्तृत उपयोग मेरे Aacks में. NENT Cons. HMMAX के साथ जोड़ा गया.Neto की तरह 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);
}

ऑन्टियम

खैर है कि यह है, HMMMX की एक आंधी यात्रा और एक किक. NENT कोर. मुझे आशा है कि आप यह उपयोगी और ज्ञान मिल गया. यदि आपके पास कोई सवाल या टिप्पणियाँ हैं तो नीचे जवाब देने के लिए कृपया महसूस कीजिए ।