Schluckaufgabe zum Zusammenführen von JSON und Lenkern aus Partials nach HTML

Ich mache eine einfache Proof-of-Concept-Website, die JSON als Datenquelle und Lenker für eine Template-Engine verwendet, um die beiden Dinge miteinander zu verschmelzen eine statische HTML-Datei.Schluckaufgabe zum Zusammenführen von JSON und Lenkern aus Partials nach HTML

Die Website wird sehr modular sein, so dass jede Komponente mit einem separaten Lenker 'partiell' gebaut wird, der jeweils Daten aus seiner eigenen JSON-Datei konsumiert.

Die Entwicklungsstruktur ich bisher habe, ist wie folgt:

src/ 
    models/ 
     header.json 
     article.json 
     footer.json 

    partials/ 
     header.hbs 
     article.hbs 
     footer.hbs 

    index.hbs

Der Inhalt der index.hbs Datei ist so etwas wie dieses:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test App</title> 
</head> 
<body> 
    {{> header}} 
    {{> article}} 
    {{> footer}} 
</body> 
</html>

Die partials sind sehr einfach für den Moment. header.hbs zB enthält:

<header>{{header}}</header>

Ich habe folgendes schluck Datei gulpfile.js, die auf einen Teil des Weges geht, was ich erreichen will:

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

gulp.task('default', function() { 
    var templateData = { 
     header: 'Welcome' 
    }, 
    options = { 
     batch : ['./src/partials'] 
    } 

    return gulp.src('src/index.hbs') 
     .pipe(handlebars(templateData, options)) 
     .pipe(rename('index.html')) 
     .pipe(gulp.dest('dist')); 
});

Bisher bündelt es in meinem partials zusammen und gibt alles schön, als HTML in einer Datei namens dist/index.html.

Die Sache, die fehlt, ist der JSON-Datenteil. Derzeit sind die JSON-Daten, die von den Partials konsumiert werden, in der Schluckdatei definiert (die Variable templateData), aber ich möchte, dass jede Teildatei Daten aus den JSON-Dateien konsumiert, um eine klare Trennung zu ermöglichen. Der Name der JSON-Datei ist identisch mit dem Namen der .hbs-Datei, von der sie konsumiert wird.

Ich bin nicht klar, wie das geht. Die gulp-compile-handlebars documentation schlägt vor, dass die Verwendung von Schluck-Daten unterstützen, was ich brauche, aber ich habe Mühe, etwas aus der gulp-data documentation, die für meinen speziellen Anwendungsfall funktioniert.

Könnte jemand bitte vorschlagen, wie ich meine Schluckakte ändern könnte, um dies zu erreichen?

Vielen Dank.

Quelle

2016-09-24 Dan

Keine Antwort auf die Frage, aber die Lösung des Problems bestand darin, 'gulp-compile-lenker' und' gulp-data' abzulehnen und stattdessen 'gulp-hb' zu verwenden, was ein Array von JSON-Objekten ermöglicht in die Vorlagen übertragen werden und ist in der Regel mehr auf das ausgerichtet, was ich mache. – Dan

Hallo @Dan, ich habe das gleiche Problem festgestellt und würde gerne die Lösung sehen, die Sie als Antwort auf die Frage gepostet haben. Vielen Dank! – elzi

Danke @Dan für die Semi-Lösung als Kommentar! Würde eine tiefere Antwort von einer Art lieben. –

Wenn ich die Frage verstehe, können Sie gulp-data verwenden, um ein Objekt aus der .json-Datei Ihres Modells zurückzugeben, und es wird Ihrem tempateData-Objekt hinzugefügt.

Verwenden Sie Schluckdaten, um ein Datenobjekt an die Vorlage zu übergeben, die auf der Lenkerdatei basiert, die verarbeitet wird. Wenn Sie Vorlagedaten übergeben, wird diese um das Objekt aus gulp-data erweitert.

So funktionierte das für mich.

gulp.task('default', function() { 
    var templateData = { 
     header: 'Welcome' 
    }, 
    options = { 
     batch : ['./src/partials'] 
    } 

    return gulp.src('src/index.hbs') 
     .pipe(data(function(file) { 
      return require('./src/models/test.json'); 
     })) 
     .pipe(handlebars(templateData, options)) 
     .pipe(rename('index.html')) 
     .pipe(gulp.dest('dist')); 
});

Und Sie können den Pfad zu Ihrer .json Datei ändern Sie den Namen der Datei .hbs src übereinstimmen.

Quelle

2017-07-25 10:12:49 Bruce

Schluckaufgabe zum Zusammenführen von JSON und Lenkern aus Partials nach HTML

Antwort

Verwandte Themen