Handlebars.js: टेबल में हैंडलबार काम नहीं करता

इसके लायक क्या है, अगर {{प्रत्येक}} टैग तालिका के बाहर रखे जाते हैं, तो अन्य टैग काम करते हैं। तालिका को बार-बार डुप्लिकेट करने पर इसका अवांछनीय प्रभाव पड़ता है, लेकिन शायद यह समस्या को कम करने में मदद करता है:

http://jsfiddle.net/cwYhN/6/

ऐसा लगता है कि यह jQuery या कुछ और के साथ कोई समस्या हो सकती है ... जब आप console.log(frag); करते हैं तो आप देखते हैं कि {{#each}} हेल्पर को हैंडलबार के साथ संकलित करने का प्रयास करने से पहले ही टेबल के बाहर धकेल दिया जाता है ...

मैंने टेम्पलेट को <script type="text/x-handlebars-template"></script> टैग के अंदर रखने के लिए jsfiddle को अपडेट किया और ऐसा लगता है कि यह ठीक काम कर रहा है ...

http://jsfiddle.net/doowb/6GdPy/1/

हाँ, मुझे अभी पता चला है कि मैं स्वयं:
http://jsfiddle.net/cwYhN/10/

इसके लायक क्या है, मुझे लगता है कि यह ब्राउज़र है जो इसे एक jQuery दोष के बजाय अमान्य HTML मानता है।

हाँ, मुझे यकीन नहीं था कि यह एक jQuery चीजें या मूल ब्राउज़र फ़ंक्शन होगा जो jQuery कॉल करता है। किसी भी तरह से, यह {{ }} बीच tbody और tr ।

यह अच्छा होगा यदि इस बाधा के भीतर संचालित करने के लिए किसी प्रकार के हैंडलबार बनाए जाएं। उदाहरण के लिए, टैग के भीतर "प्रत्येक" को रखने में सक्षम होने के साथ-साथ यह अंतर्निहित समझ है कि यह टैग की सामग्री पर पुनरावृत्त होता है। मैं कल्पना कर सकता हूं कि ऐसा लगता है:

<table>
  <tbody handlebars="{{each}}">
    ... these get iterated ...
  </tbody>
</table>

कुछ इस तरह की अनुमति देने से ब्राउज़र को महत्वपूर्ण प्रत्येक कथन को अलग करने से रोका जा सकेगा, और यह उस समापन टैग पर पिगबैक कर सकता है जिसका वह (/ tbody) से संबंधित है

जैसा कि आप लोग पहले ही बता चुके हैं, एचटीएमएल पार्सर हैंडलबार मार्कअप से भ्रमित है और इसके साथ डीओएम संरचना के रूप में आता है जिसे आप हैंडलबार टेम्पलेट में बदलने का प्रयास करते हैं:

            {{#each activity}}

            {{/each}}
        <table style="border:1px solid #ccc;">
        <thead>
            <tr><th>Month</th>
            <th>Imps</th>
            <th>Clicks</th>
            <th>Spend</th>
        </tr></thead>
        <tbody><tr>
                <th>{{month}}</th>
                <td>{{impressions}}</td><td>{{clicks}}</td><td>{{spend}}</td>
            </tr></tbody>
    </table>

इसके आसपास काम करने के लिए उपरोक्त स्क्रिप्ट व्यवहार, जावास्क्रिप्ट स्ट्रिंग्स, या प्रीकंपिलेशन जैसे कुछ का उपयोग करना चाहिए।

इसे बंद करना क्योंकि यह समस्या हैंडलबार में बग की तुलना में ब्राउज़र कार्यान्वयन विवरण से अधिक है।

यह पता लगाने में आधा दिन बर्बाद हो गया कि {{#each}} टेबल में काम नहीं करता है। यह वास्तव में मददगार होगा यदि यह केवल दस्तावेज़ीकरण में कहा गया था।

प्रत्येक ठीक से लोड होने पर टेबल में पूरी तरह से ठीक काम करता है। आप अपने टेम्प्लेट कैसे लोड कर रहे हैं?

@preichelt ब्राउजर को टेबल में {{#each}} को खराब करने से रोकने के लिए आपको स्क्रिप्ट टैग के भीतर से हैंडलबार लोड करना चाहिए। आप स्टैक ओवरफ़्लो पर अधिक पढ़ सकते हैं:

http://stackoverflow.com/questions/15386276/why- should-we-wrap-our-templates-inside-script-blocks

इस बग ने मेरे जीवन के दो घंटे बर्बाद कर दिए और अब शनिवार को रात के 10:30 बजे हैं, मैं अपने कार्यालय में इस बग को हल करने के लिए काम कर रहा हूं जब तक कि मुझे यह समस्या नहीं मिली और [आधिकारिक ब्लॉक डॉक्टर]
(http://handlebarsjs.com/builtin_helpers.html) इसके बारे में कुछ नहीं कहता।

यदि यह स्पष्ट नहीं था, तो यह हैंडलबार की गलती नहीं है, बल्कि यह आपकी गलती है कि HTML कैसे काम करता है: https://html.spec.whatwg.org/multipage/syntax.html#an -introduction-to-error -हैंडलिंग-और-अजीब-केस-इन-द-पार्सर

तो, आप मानते हैं कि हर कोई जो हैंडलबार्स का उपयोग करने की कोशिश करता है, उसे अच्छी समझ होनी चाहिए कि HTML पार्सर कैसे काम करता है? और यदि नहीं, तो यह _उपयोगकर्ता की गलती_ है, दस्तावेज़ीकरण की स्पष्टता का दोष नहीं है? इस धारणा का कोई मतलब नहीं है। एक और भारी और जटिल टेम्पलेट इंजन, एंगुलरज, अपने टेम्पलेट सिंटैक्स के रूप में एचटीएमएल संगत सिंटैक्स का उपयोग करते हैं, उदाहरण के लिए, यदि मुझे लूप टेबल की आवश्यकता है, तो मैं इसका उपयोग कर सकता हूं

<tr ng-repeat="dto in tableData">

और Angularjs Html टिप्पणियों का उपयोग करके लूप की आंतरिक स्थिति को बनाए रखता है:

<!-- ngRepeat: column in row -->
<tr ng-repeat="dto in tableData">

Angualrjs जितना संभव हो सके Html के सिंटैक्स का सम्मान करने और उसका पालन करने की कोशिश करता है और सफलतापूर्वक धारणा से बचता है। लेकिन Handlebarsjs का टेम्प्लेट सिंटैक्स ऐसा नहीं करता है जिससे यह उपयोगकर्ताओं के लिए Html पार्सर समस्या को उजागर करता है।
यदि आप डेवलपर अपने पक्ष में समस्या का समाधान नहीं कर सकते हैं और फिर आपके पास अपने उपयोगकर्ताओं को समस्या के बारे में बताने के लिए _ड्यूटी_ है यदि आप वास्तव में अपने प्रोजेक्ट और दुनिया भर के अपने उपयोगकर्ताओं की परवाह करते हैं।
वैसे भी, मैं एक दस्तावेज़ मुद्दा खोलूंगा क्योंकि _ मेरा मानना ​​​​है कि मैं पहला व्यक्ति नहीं हूं जो इस सिरदर्द के मुद्दे पर आया है और मैं आखिरी नहीं होगा। _

डोम में कोणीय चलता है, इसलिए यह डोम जागरूक है। हैंडलबार केवल स्ट्रिंग्स के साथ काम करता है और इसमें DOM की कोई अवधारणा नहीं है।

@profullstack : जैसा कि @stevenvachon ने कहा, हैंडलबार्स HTML के साथ काम नहीं करता है, लेकिन केवल टेक्स्ट के साथ। लेकिन यह दस्तावेज़ों से स्पष्ट नहीं हो सकता है, क्योंकि सभी उदाहरण HTML हैं। यह व्यक्तिगत रूप से इसका उपयोग मार्कडाउन उत्पन्न करने के लिए भी करता है ...

यदि आप मुझे बता सकते हैं कि डॉक्स में आपको किस प्रकार के पाठ की आवश्यकता होगी, तो मुझे इसे जोड़ने में खुशी होगी। हालांकि, सामान्य उपयोग निर्देश ( <script> -टैग के साथ भाग सहित, http://handlebarsjs.com/ के मुख्य पृष्ठ पर पहले से ही मौजूद हैं

@profullstack मुझे लगता है कि आप "समय बर्बाद" करने के बारे में निराश हैं, लेकिन मेरी राय में, आपको यह पूरी तरह से पीछे की ओर मिला है।

कोई ओपन सोर्स प्रोजेक्ट और न ही योगदानकर्ता का आपके प्रति कोई कर्तव्य नहीं है। अन्य डेवलपर्स के जीवन को आसान बनाने की कोशिश करने के लिए, हैंडलबार जैसे उपकरण मुफ्त में बनाए और बनाए जाते हैं और लगभग बिना किसी धन्यवाद के। यदि आप किसी भी ओपन सोर्स प्रोजेक्ट का उपयोग करने में सक्षम नहीं थे, तो आपके काम में कितना समय लगेगा?

मैं आपको बता सकता हूं, पहले हाथ, कि साथ आने और इस तरह के स्वर के साथ टिप्पणियां लिखने से वांछित प्रभाव के

@ErisDS आपकी सलाह के लिए धन्यवाद। हो सकता है कि मेरी पहली टिप्पणी बहुत मजबूत थी, लेकिन मैं इस बारे में आपकी बात से पूरी तरह सहमत हूं:

to try to making other developers lives easier

और मैं Handlebarsjs का उपयोग करने के लिए Angularjs को क्यों छोड़ता हूँ? _क्योंकि मेरा मानना ​​है कि Handlebarsjs मेरे जीवन को Angularjs की तुलना में आसान बना देगा।_
तो, कृपया अपने हजारों ओपन सोर्स उपयोगकर्ताओं को संभावित समस्या से बचने में मदद करने के लिए दस्तावेज़ीकरण में कुछ नोटिस शब्द जोड़ें "अन्य डेवलपर्स के जीवन को आसान बनाने" की आपकी इच्छा के विरुद्ध है? मुझे लगता है कि यह नहीं है।
के लिये:

No open source project nor contributor has any duty to you.

हाँ यह सच हे। आप एक ओपन सोर्स प्रोजेक्ट शुरू कर सकते हैं और फिर उसे छोड़ सकते हैं, यह पूरी तरह से ठीक है। लेकिन जब आपका प्रोजेक्ट बढ़ता है, आप अपने प्रोजेक्ट पर अधिक समय और दिल लगाते हैं, आप अपने प्रोजेक्ट के बारे में अधिक प्यार करते हैं और आप इसे दुनिया के साथ साझा करना भी चाहते हैं। इस समय आप _अपने उपयोगकर्ताओं की देखभाल_ और_अपने दस्तावेज़ीकरण की देखभाल_ करना शुरू कर देंगे। Handlebarsjs इस चरण में है, यह कोई छोटी परियोजना नहीं है, यह एक लोकप्रिय परियोजना है और दुनिया भर में प्रोग्रामर द्वारा उपयोग की जाती है, यहां तक ​​कि दक्षिण कोरिया में, चीन में और इसी तरह।
जहां तक ​​​​मुझे पता है, जीथब पर अधिकांश ओपन सोर्स प्रोग्रामर अपने प्रोजेक्ट और उनकी README.md फाइल पर गर्व करते हैं, और चाहते हैं कि अधिक से अधिक लोग अपने टूल और कोड का उपयोग करें।
तो अगर:

• आप अपने ओपन सोर्स उपयोगकर्ताओं की परवाह नहीं करना चाहते हैं
• मैं आखिरी व्यक्ति हूं जो इस मुद्दे पर आऊंगा
  आप इस टिप्पणी में पहली टिप्पणी और उपयोगकर्ता-कृपया चर्चा में मेरे तकनीकी विश्लेषण को पूरी तरह से अनदेखा कर सकते हैं।
  इसके अलावा, ओपन सोर्स प्रोजेक्ट _charity_ जैसा कुछ नहीं है जो आप दुनिया को देते हैं, यह आपके और अन्य प्रोग्रामर के बीच _संचार पुल_ है।

@nknapp आपके उत्तर के लिए धन्यवाद।
हो सकता है कि मेरी पहली टिप्पणी बहुत मजबूत हो और मैं इसके लिए और मेरी टिप्पणी पढ़ने वाले लोगों से माफी मांगता हूं।
पहली नजर से, हैंडलबार _a टेक्स्ट रिप्लेसमेंट टूल_ की तरह काम करता है और इसे समझना वास्तव में आसान है। तो जब मैं कुछ ऐसा लिखता हूं:

{{#each myListData}}
                        <tr>{{name}}</tr>
{{/each}}

अगर यह सिर्फ प्रतिस्थापन है, तो मैं इस तरह कुछ उम्मीद करता हूं:

<tr>nameA</tr>
<tr>nameB</tr>

लेकिन जब एचटीएमएल में आया, तो यह कुछ अलग व्यवहार करता है, और यह एचटीएमएल पार्सर की प्रकृति के कारण है जैसा कि
तो मुझे लगता है कि "प्रत्येक ब्लॉक सहायक" खंड के नीचे केवल एक वाक्य पर्याप्त होगा:

WARNING: please use script block when you try to use #each block inside table, due to the know issue of [How HTML parse works(thanks for <strong i="18">@stevenvachon</strong>'s reference](https://html.spec.whatwg.org/multipage/syntax.html#an-introduction-to-error-handling-and-strange-cases-in-the-parser)

अगर आप अपनी राय साझा करेंगे तो मैं वास्तव में इसकी सराहना करता हूं। धन्यवाद।

बात यह है कि इसका #each -helper से कोई लेना-देना नहीं है। आपको सीधे HTML में कभी भी टेम्प्लेट

हो सकता है कि हम लैंडिंग-पेज पर उदाहरण के नीचे आपकी तरह की चेतावनी दे सकें...

बस एक और नोट:

मैं उत्पादन में स्क्रिप्ट-ब्लॉक पद्धति का उपयोग नहीं करूंगा। इसके बजाय मैं टेम्प्लेट को प्रीकंपाइल करने के लिए वेबपैक या किसी अन्य टूल का उपयोग करूंगा।

@nknapp हां, मुझे लगता है कि आपकी राय सही है: हमें कभी भी सीधे HTML में टेम्प्लेट नहीं लिखना चाहिए। इसलिए मुझे लगता है कि लैंडिंग-पेज पर, पहले "गेटिंग स्टार्टेड" सेक्शन को स्क्रिप्ट का उपयोग उदाहरण के रूप में करना चाहिए और नीचे ग्रे ब्लॉक में, हम बदल सकते हैं

You **can** deliver a template to the browser by including it in a <script> tag.

प्रति

You **should always** deliver a template to the browser by including it in a <script> tag.

मुझे लगता है कि आपका सुझाव:

**never** write a template directly into HTML

पूरी तरह से सही है, और इसे लैंडिंग-पेज पर रखा जाना चाहिए ताकि सभी इसका अनुसरण कर सकें और यह कई समस्याओं से बच सकता है। मुझे लगता है कि यह एक अच्छा विचार है, क्या आपको ऐसा लगता है?

हालाँकि, यह स्पष्टीकरण काम नहीं करता है, क्योंकि वे इसे इस प्रकार समझ सकते हैं:

<script type="text/x-handlebars">
  {{#each list as |item|}}
    <td>{{item}}</td>
  {{/each}}
</script>

@stevenvachon हां, स्क्रिप्ट के अंदर सिर्फ टेम्प्लेट डालना आपके उदाहरण में पर्याप्त नहीं है, हो सकता है कि हमें टेम्प्लेट का उपयोग करने के सही तरीके के बारे में और नोट्स जोड़ने की आवश्यकता हो, हम इस बारे में आपके सुझाव सुनना चाहेंगे।

शायद:

अधिकांश उत्पादन अनुप्रयोगों के लिए, आप पार्सर और स्ट्रिंग टेम्पलेट्स का उपयोग नहीं करना चाहेंगे। प्रीकंपाइलेशन में देखें।

@stevenvachon आपकी टिप्पणियों के लिए धन्यवाद और मुझे लगता है कि यह बेहतर होगा यदि हम आपकी टिप्पणियों के साथ आपके HTML पार्सर लिंक को एक साथ रखें:

अधिकांश उत्पादन अनुप्रयोगों के लिए, आप पार्सर और स्ट्रिंग टेम्पलेट्स का उपयोग नहीं करना चाहेंगे। प्रीकंपाइलेशन में देखें। यदि आप सीधे HTML में टेम्पलेट का उपयोग करते हैं तो कुछ ज्ञात समस्याएं हैं, उदाहरण के लिए, #each ब्लॉक हेल्पर HTML पार्सर के काम करने के ।

इसे शायद में विभाजित किया जाना चाहिए

1. <script> -टैग उदाहरण के ठीक नीचे

यह महत्वपूर्ण है कि आप टेम्पलेट को <script> -टैग के अंदर रखें। इसे सीधे HTML में न डालें या HTML-पार्सर इसे संशोधित कर सकता है (उदाहरण के लिए, यदि इसमें कोई तालिका है )

1. प्रीकंपाइलेशन के बारे में बुलेट पॉइंट को बदलें।

कृपया ध्यान दें कि उत्पादन अनुप्रयोगों के लिए इस दृष्टिकोण की अनुशंसा नहीं की जाती है। अपने टेम्प्लेट को प्रीकंपाइल करना भी संभव है। [...]

वास्तव में, मैं व्यक्तिगत रूप से अब ब्राउज़र में हैंडलबार्स का उपयोग नहीं करूंगा: वहाँ कई अन्य रूपरेखाएँ हैं (न केवल कोणीय और प्रतिक्रिया, बल्कि Vue और Ractive)। यह वीडियो बहुत अच्छा है और समस्या को दिखाता है ...

मैं सर्वर पर और स्थिर-पृष्ठ जनरेटर के रूप में हैंडलबार का उपयोग करता हूं, लेकिन ब्राउज़र-प्रतिपादन के लिए, मुझे लगता है कि बेहतर तरीके हैं।

@nknapp मैंने हैंडलबार्स-एचटीएमएल-पार्सर लिखना शुरू किया, लेकिन इसे प्रतिरोध का सामना करना पड़ा ।

@nknapp आपके उत्तर के लिए धन्यवाद। आपकी टिप्पणियों में शामिल हैं:

1. टेम्पलेट को अंदर रखने का महत्व a

@profullstack मैं इस परियोजना का अनुरक्षक नहीं हूं।

मैंने बदलाव किए हैं।

@nknapp धन्यवाद, मेरा मानना ​​है कि आपके परिवर्तनों से बहुत से लोगों को लाभ होगा।

मुझे पता है कि यह मुद्दा काफी पुराना है, लेकिन हाल ही में सेंडग्रिड के ईमेल टेम्प्लेट संपादक द्वारा इन सर्वोत्तम प्रथाओं का पालन नहीं करने के कारण मैं इसमें भाग गया। अगर कोई और इस मुद्दे पर Google की ओर से इस कारण से समाप्त होता है, तो हैंडलबार कोड को HTML टिप्पणी में रखना एक समाधान है।

<table >
  <tbody>
    <!-- {{#each items}} -->
    <tr>
      <td>{{this.key}}</td>
      <td>{{this.value}}</td>
    </tr>
    <!-- {{/each}} -->
  </tbody>
</table>

जो निम्न आउटपुट उत्पन्न करता है

<table>
  <tbody>
    <!--  -->
    <tr>
      <td>my key</td>
      <td>my value</td>
    </tr>
    <!--  -->
    <!--  -->
    <tr>
      <td>my key 2</td>
      <td>my value 2</td>
    </tr>
    <!--  -->
  </tbody>
<table>

(नोट: मैंने इसे सीधे हैंडलबार से सत्यापित नहीं किया है, केवल Sendgrid के टेम्पलेट संपादक पर)

उस टिप के लिए धन्यवाद @gurpreetatwal । आपने आज शाम मुझे SendGrid के लिए उस टिडबिट के साथ डिबगिंग के घंटे बचाए!

@gurpreetatwal लेकिन क्यों?

@Lazarencjusz इस संबंध में क्यों फिक्स काम करता है या SendGrid ईमेल टेम्पलेट संपादक सही तरीके से काम क्यों नहीं करता है?

नमस्ते! जब आप तालिका के बजाय div तत्वों का उपयोग करते हैं, तो काम होगा।
सभी तालिका तत्वों को div में फिर से लिखें।

@gurpreetatwal का समाधान मेरे लिए Mailchimp/Mandrills पर हैंडलबार के लिए