उल्का के लिए सर्वोत्तम प्रथाओं के बारे में सिर्फ एक प्रश्न। फिलहाल मैंने एक साइट को सक्रिय कई टेम्पलेट्स के साथ कोडित किया है, लेकिन सीएसएस और jQuery के साथ अक्षम किया गया है। तो कुछ इस तरह:

<body>
{{> home }}
{{> about }}
{{> contact }}
</body>

<template name="home"><div id="home">
stuff
</div></template>

सीएसएस में

#about, #contact {display: none}

फिर jQuery में मैं इन गुणों को केवल एक क्लिक के साथ बदल दूंगा जो कि पेज को सक्रिय माना जाता है।

$(document).on('click', '#aboutbutton', function(){
$('#home').fadeOut( set time out and enable about page)
});

क्या इस तरह से करने में कोई बुराई है? खासकर जब से पृष्ठों को स्वयं प्रतिक्रियाशील होने की आवश्यकता नहीं है, बल्कि उनकी सामग्री की?

0
Jason Chen 18 मई 2016, 00:43

1 उत्तर

सबसे बढ़िया उत्तर

क्या इसमें कुछ गलत है? निश्चित नहीं है, लेकिन यह एक समस्या होगी यदि आप बाद में प्रतिक्रिया में माइग्रेट करने का निर्णय लेते हैं, जो jQuery के साथ अच्छी तरह से काम नहीं करता है। लेकिन ब्लेज़ के लिए, यह काम करेगा।

"उल्का" तरीका हेल्पर्स और हैंडलबार्स #if स्टेटमेंट का उपयोग करना होगा।

<body>
{{> home }}
{{> about }}
{{> contact }}
</body>

<template name="home">
 {{#if showHome}}
 <div id="home">
  stuff
 </div>
 {{/if}}
</template>

और फिर .js फ़ाइल में, आपके पास "शोहोम" के रूप में परिभाषित एक सहायक हो सकता है:

Template.home.helpers({
  showHome() {
     return someBooleanVariable
  },
});

हालाँकि, इससे CSS ट्रांज़िशन करना कठिन हो जाता है। जब ब्लेज़ टेम्पलेट्स को जोड़ता या हटाता है, तो हुक के साथ संक्रमण और एनिमेशन को संभालने के तरीके होते हैं, लेकिन कक्षाओं को जोड़ने/निकालने के अधिक पारंपरिक तरीके से इसे संभालना बहुत आसान होता है।

<body>
{{> home }}
{{> about }}
{{> contact }}
</body>

<template name="home">
 <div id="home" class="template {{#if showHome}}showTemplate{{/if}}>
  stuff
 </div>
</template>

सहायक ऊपर जैसा ही है, लेकिन स्टाइलशीट होगी:

.template {
  transition: opacity 0.3s ease;
  opacity: 0
  /* Some other way of hiding, e.g. offscreen, width: 0 */
}
.showTemplate {
  opacity: 1
}

यह प्रदर्शन से टेम्पलेट को आसानी से जोड़ने या हटाने में सक्षम होने का लाभ देता है।

1
Nathan Webb 18 मई 2016, 02:17
मुझे चिंता है कि ये सभी टेम्प्लेट एक ही समय में पेज-लोड पर लोड हो रहे हैं। क्या होगा यदि मैंने एक गजियन विभिन्न टेम्पलेट्स और अनुप्रयोगों के साथ एक उल्का साइट बनाई है? सादे ओल 'एचटीएमएल या पीएचपी के साथ यह हर छोटे हिस्से को अपने पेज में रखने जितना आसान है। उल्का एक एसपीए होने के साथ, सब कुछ एक ही समय में बूट होने वाला है।
 – 
Jason Chen
18 मई 2016, 03:48
यह सही है, लेकिन यह एक ट्रेड-ऑफ है। प्रारंभिक लोड धीमा है (हालांकि छोटा और संपीड़न के साथ, यह वास्तव में बहुत बुरा नहीं है), हालांकि एक बार लोड होने के बाद, प्रतिक्रिया बहुत तेज होती है। यदि आप कभी भी उल्का का उपयोग करके बहुत बड़ा एप्लिकेशन बनाते हैं, तो आप फ़ाइल लोडिंग को विभाजित करने के लिए वेबपैक जैसा कुछ देख सकते हैं: github.com/thereactivestack/meteor-webpack/tree/master/packages/…
 – 
Nathan Webb
18 मई 2016, 04:52