जेएसओएन और हैंडलबार्स को आंशिक रूप से गुलप के साथ HTML में कैसे जोड़ें?

मैं हैंडलबर्स और गुलप का उपयोग कर एक स्थिर साइट बना रहा हूं।जेएसओएन और हैंडलबार्स को आंशिक रूप से गुलप के साथ HTML में कैसे जोड़ें?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Test</title> 
</head> 
<body> 
    {{> header}} 
    {{> home-section}} 
    {{> home-section}} 
    {{> home-section}} 
    {{> footer}} 
</body> 
</html>

मैं, intro.json में पारित करने के लिए faq.json चाहते हैं, और home-section partials से प्रत्येक के लिए features.json, और header.jsonheader रहे हैं:

app/ 
    content/ 
     intro.json 
     header.json 
     faq.json 
     features.json 
     footer.json 
    templates/ 
     home.hbs 
     partials/ 
      home-section.hbs 
      header.hbs 
      footer.hbs 
    index.html 
Gulpfile.js

home.hbs की सामग्री यह है: यहाँ मेरी फ़ोल्डर संरचना है और footer.json पाद लेख के लिए।

यह वही है मैं अब तक मेरी Gulpfile में है:

var gulp = require('gulp'); 
var handlebars = require('gulp-compile-handlebars'); 
var rename = require('gulp-rename'); 

gulp.task('html', function() { 
    return gulp.src('./app/templates/*.hbs') 
    .pipe(handlebars({}, { 
      ignorePartials: true, 
      batch: ['./app/templates/partials'] 
      })) 
    .pipe(rename({ 
      extname: '.html' 
      })) 
    .pipe(gulp.dest('build')); 
});

मैं यह पता लगाने की कैसे विशेष रूप से home-section रों को एक समय में एक से अधिक JSON फ़ाइल पारित करने के लिए, समर्थ हुए। अग्रिम में धन्यवाद!

स्रोत

2017-01-16 Cassidy Williams

handlebars का पहला पैरामीटर आपके वैश्विक संदर्भ है, जो आपके सभी टेम्पलेट्स के लिए उपलब्ध है। आप अपनी व्यक्तिगत JSON फ़ाइलों को संदर्भ ऑब्जेक्ट में लोड कर सकते हैं, और इसे पहले पैरामीटर के रूप में उपयोग कर सकते हैं।

(यह करने के लिए निश्चित रूप से बेहतर तरीके नहीं है, लेकिन हे, यह त्वरित और आसान है!)

var infoData = require('./app/content/info.json'); 
var faqData = require('./app/content/faq.json'); 
var featuresData = require('./app/content/features.json');

फिर आप वैश्विक संदर्भ के लिए अपने हैंडल से काम के माध्यम से इन वस्तुओं पारित कर सकते हैं

.pipe(handlebars({ info: infoData, faq: faqData, features: featuresData }))

एक बार जब डेटा आपके संदर्भ में है, तो आप इसे इस तरह से एक्सेस कर सकते हैं:

{{> home-section content=info }} 
{{> home-section content=faq }} 
{{> home-section content=features }}

आपके home-section आंशिक के अंदर, आपके पास content ऑब्जेक्ट होगा जिसमें आपके द्वारा पारित फ़ाइल का डेटा होगा। इसलिए, यदि आपका info.json फ़ाइल इस तरह देखा:

{ "header": "Info", "details": "This is some information" }

आपका home-content.hbs आंशिक तो इस तरह डेटा का उपयोग कर सकते हैं:

<h2>{{ content.header }}</h2> 
<p>{{ content.details }}</p>

स्रोत

2017-01-16 03:50:41 dstaley

'आपके' होम-सेक्शन 'के अंदर आपका क्या मतलब है, आपके पास' सामग्री 'ऑब्जेक्ट होगा? क्या आप मुझे इसके लिए कोड दिखा सकते हैं, कृपया? – Ryan

@Ryan जब आप एक हैंडलबार्स आंशिक प्रस्तुत करते हैं, तो आपके द्वारा पारित पैरामीटर तब आपके द्वारा उपयोग किए गए पैरामीटर के नाम के आधार पर आंशिक टेम्पलेट के अंदर उपलब्ध होते हैं। इसलिए यदि आपने अपना आंशिक '{{> होम-सेक्शन चीज़ = जानकारी}}' के साथ डाला है, तो आपके 'होम-सेक्शन' आंशिक के पास 'info' की सामग्री वाले चर 'चीज़' तक पहुंच होगी। – dstaley

दुर्भाग्य से, gulp-compile-handlerbars समारोह केवल two arguments लेता है, पहले एक सभी डेटा किया जा रहा है अपने टेम्पलेट्स में पारित किया। इसका मतलब है कि आपको अपनी सभी जेसन फाइलों को एक साथ लोड करना होगा और उन्हें एक ऑब्जेक्ट के रूप में पास करना होगा।

आप की तरह एक छोटे से सहायक के साथ ऐसा कर सकते हैं:

function requireJsons(fileNames) { 
    return fileNames.reduce(function(jsons, fileName) { 
    jsons[fileName] = require('app/content/' + fileNames[i] + '.json'); 
    return jsons; 
    }, {}); 
}

कौन सा आप अपने सभी टेम्पलेट्स के लिए डेटा वस्तु का निर्माण करने के लिए उपयोग कर सकते हैं:

var data = requireJsons(['intro', 'header', 'faq', 'features', 'footer']); 

gulp.task('html', function() { 
    return gulp.src('./app/templates/*.hbs') 
    .pipe(handlebars(data, { 
     // ...

आप हमेशा के लिए की जरूरत है app/content निर्देशिका से सभी जेसन फ़ाइलों को लोड करें, आप सभी प्राप्त करने के लिए readdirSync का उपयोग कर सकते हैं।json फ़ाइल नाम और फिर उन्हें requireJsons को पारित:

var path = require('path'); 
var fileNames = fs.readdirSync('app/content') 
    .filter(function(fileName) { 
    return path.extname(fileName) === '.json'; 
    }); 
var data = requireJsons(fileNames);

बेशक, अगर गति महत्वपूर्ण है, तो आप दो एक में विधि है कि jsons लोड करता है और एक भी पास में data वस्तु बनाता है जोड़ सकता।

एक और विकल्प प्रत्येक टेम्पलेट को व्यक्तिगत रूप से संकलित करना और प्रत्येक संकलन में उपयुक्त डेटा को पास करना है। gulp-foreach जैसे टूल उपयोगी होंगे।

स्रोत

2017-01-16 04:29:16 nem035

जेएसओएन और हैंडलबार्स को आंशिक रूप से गुलप के साथ HTML में कैसे जोड़ें?

उत्तर

संबंधित मुद्दे