I'm using Zurb Foundation in my project and it is very convenient. But I'm confused that how can I add my own JavaScript which is just for a specific page's DOM when that page is loading.

I used a third-party chart lib in a page's partial and I must initial the chart container with some JavaScript. These JavaScripts can not be bined to the final app.js because other pages don't contain the chart container div. So can any one give me some advice?

Edit: The following is my project structure.

src/
├── assets
│   ├── img
│   │   └── x.jpg
│   ├── js
│   │   ├── app.js
│   │   ├── draw.js
│   │   └── xcharts.js
│   └── scss
│       ├── app.scss
│       ├── news.scss
│       └── _settings.scss
├── data
├── layouts
│   └── default.html
├── pages
│   ├── news.html
│   └── template.html
├── partials
│   └── news-header.html
└── styleguide
    ├── index.md
    └── template.html

I tried adding my JavaScript code just after my chart container but I can't because it used jQuery.Assuming that my JavaScript is the draw.js. The gulp will auto merge the draw.js to the app.js which is for every page. If I just include the draw.js to my page but which page I should prevent the gulp auto merge the draw.js and xcharts to the app.js and then add a script tag to somewhere of the page.But how?
Is there a way that is convenient to add scripts that are out of the Foundation framework? Is there a method like the html template partial's behavior?

I'm using Zurb Foundation in my project and it is very convenient. But I'm confused that how can I add my own JavaScript which is just for a specific page's DOM when that page is loading.

I used a third-party chart lib in a page's partial and I must initial the chart container with some JavaScript. These JavaScripts can not be bined to the final app.js because other pages don't contain the chart container div. So can any one give me some advice?

Edit: The following is my project structure.

src/
├── assets
│   ├── img
│   │   └── x.jpg
│   ├── js
│   │   ├── app.js
│   │   ├── draw.js
│   │   └── xcharts.js
│   └── scss
│       ├── app.scss
│       ├── news.scss
│       └── _settings.scss
├── data
├── layouts
│   └── default.html
├── pages
│   ├── news.html
│   └── template.html
├── partials
│   └── news-header.html
└── styleguide
    ├── index.md
    └── template.html

I tried adding my JavaScript code just after my chart container but I can't because it used jQuery.Assuming that my JavaScript is the draw.js. The gulp will auto merge the draw.js to the app.js which is for every page. If I just include the draw.js to my page but which page I should prevent the gulp auto merge the draw.js and xcharts to the app.js and then add a script tag to somewhere of the page.But how?
Is there a way that is convenient to add scripts that are out of the Foundation framework? Is there a method like the html template partial's behavior?

• javascript
• zurb-foundation
• zurb-foundation-6

Share Improve this question Follow edited Mar 13, 2016 at 6:59 Colin Marshall 2,14222 gold badges2222 silver badges3131 bronze badges asked Mar 12, 2016 at 15:06 Guisong HeGuisong He 1,98611 gold badge1717 silver badges3030 bronze badges 3

• Why can't you just add another script tag and include it only on that page? – Colin Marshall Commented Mar 12, 2016 at 18:09
• @ColinMarshall I added my project structure and some details. – Guisong He Commented Mar 13, 2016 at 3:08
• Thanks, that info helped. For future reference, include information like how you are using Foundation in your project (i.e. a Foundation template, bower, npm, etc.) and the version # to get an answer quicker. Foundation is robust and can be used in many different ways so it helps to know specifics, although I was able to figure out how you were using it by looking at your folder structure. – Colin Marshall Commented Mar 13, 2016 at 5:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

From the looks of your folder structure I am assuming the "flavor" of Foundation 6 you are using is the Foundation Zurb Template.

1. Move all scripts you want to use on one page only to src/assets/js/single-page
2. Open up src/layouts/default.html
3. Find the line: <script src="{{root}}assets/js/app.js"></script>
4. After that line, insert the following code:

{{#ifpage 'news'}}
  <script src="{{root}}assets/js/single-page/draw.js"></script>
  <script src="{{root}}assets/js/single-page/charts.js"></script>
{{/ifpage}}

This will only include those scripts on the page named news.

The scripts also need to be excluded in config.yml so that they aren't included in app.js. Add "!src/assets/js/single-page/**/*" to the javascript paths towards the bottom:

# Paths to your own project code are here
    - "src/assets/js/!(app).js"
    - "!src/assets/js/single-page/**/*"
    - "src/assets/js/app.js"

Change the javascript task in gulpfile.babel.js to this:

function javascript() {
  // Insert this section before the return statement
  gulp.src('src/assets/js/single-page/**/*.js')      
  .pipe($.if(PRODUCTION, $.uglify()
    .on('error', e => { console.log(e); })
  ))
  .pipe(gulp.dest(PATHS.dist + '/assets/js/single-page'));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.concat('app.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

Now any JS files you stick in the single-page directory will be copied to the dist directory and excluded from app.js.

For more about the template system used in the Foundation templates, see the Panini section of the Foundation Docs.