2016-04-19 7 views
0

それは使用できますか?ここでの例:ジェイドの複数変数(ex-Pug)

- var movieList = [{title: "Ocean's Eleven", rating: 9.2}, {title: "Pirates of the Caribbean", rating: 9.7}]; 

mixin movie-card(movie) 
    h2.movie-title= movie.title 
    div.rating 
    p= movie.rating 

for movie in movieList 
    +movie-card(movie) 

私は、各行の先頭に-を使用する必要はありません。 マルチラインJSONファイルをインポートする方法がありますか?

答えて

1

compileの間にLOCALS(Jade)またはDATA(Pug)を使用してJSONデータをインポートできます。これは私がgulpjsとPugを通して行う方法です。movieListはgulpfile.jsで作成されたデータであり、songs.jsonは外部ファイルです。あなたは、タスクマネージャを使用したり表現している場合は...など、

gulpfile.js

var fs = require('fs'), 
    gulp = require('gulp'), 
    pug = require('gulp-pug'), 
    movieList = [{title: "Ocean's Eleven", rating: 9.2}, {title: "Pirates of the Caribbean", rating: 9.7}]; 

gulp.task('markup', function() { 
    gulp.src('./markup/*.pug') 
    .pipe(pug({ 
     data: { 
     // in Jade, this would be "locals: {" 
     "movies": movieList, 
     "music": JSON.parse(fs.readFileSync('./songs.json', { encoding: 'utf8' })) 
     } 
    ) 
    .pipe(gulp.dest('../')) 
    }); 
}); 

とパグテンプレートで

- var movieList = locals['movies'] // assuming this will eventually be "= data['movies']" 
- var musicList = locals['music'] // assuming this will eventually be "= data['music']" 

mixin movie-card(movie) 
    h2.movie-title= movie.title 
    div.rating 
    p= movie.rating 

for movie in movieList 
    +movie-card(movie) 

mixin song-card(song) 
    h2.song-title #{song.title} 
    div.rating 
    p #{song.rating} 

for song in musicList 
    +song-card(song) 
あなたのコードサンプルから明らかではありません