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 combined 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?