1

Attempting to wrap my head around Ember.js. Seems I understand the complex things, but miss out on the little things.

How would one go about adding an example.js file? For simplicity, let's say the example.js file only contains:

(function(){
  console.log("example is alive in console");
})(window);

This should display "example is alive in console" within the browser console.

I have tried: adding app.import('vendor/javascripts/example.js'); within ember-cli-build.js and adding <script src="{{rootURL}}vendor/javascripts/example.js"></script> to index.html

Console is showing

ⓧ GET http://localhost:4200/vendor/javascripts/example.js
DEBUG: -------------------------------
DEBUG: Ember : 2.11.3
DEBUG: Ember Data : 2.12.1
DEBUG: jQuery : 3.2.1
DEBUG: -------------------------------
ⓧ GET http://localhost:4200/vendor/javascripts/example.js

All of the answers I have found stated that just adding custom.js to vendor file works. Sadly, I am missing something.

Improve this question

3 Answers 3

Reset to default
2

When modifying ember-cli-build.js you MUST RESTART the ember server manually. The livereload server will not pick up the changes.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Your answer made me realize that, my path name was wrong... sigh It's always something silly :P Your answer deserves to be the accepted answer, even if your'e also the person asking the question ;-) Thanks for making me realize my mistake :D
1

This works for me when I don't nest assets in the /vendor directory. The ember-cli build process bundles JS files in /vendor into a single vendor.js file, which you can see linked in app/index.html. So place your example.js file at the root of /vendor, and then add the import to ember-cli-build.js:

app.import('vendor/example.js`);

Now when you start the server, your code from example.js should execute, since it will be included in assets/vendor.js.

Improve this answer

1 Comment

Thanks for the validation. I switched file to root, same issue. Then put it back /javascripts/example.js and removed the '<script src="{{rootURL}}vendor/javascripts/example.js"></script>' from index.html and RESTARTED the ember server. See, knew it was something silly. When modifying ember-cli-build.js you MUST RESTART the ember server manually. The livereload server will not pick up the changes.
-1

Firstly, Ember.js has Convention Over Configuration approach, and your URL can do a lot of things than a normal HTML website.

Whatever you may want to do with your custom.js file it is not ember way of having it as a path. You need routes for navigation across the app. Although routes do much more than navigation. You specify the structure of your app that a user can browse through using Router's map function in app/router.js file.

However if you want to include custome.js file in your app, and have custom.js do some set of tasks for your app. You can simply go ahead and create a directory with any name, javascript for instance inside app directory. Have your javascript files placed inside it. Then you can import these files as simply as referencing any other files in ember:

import customObject from 'yourApp/javascript/custom.js';

Here, your custom.js should be exporting customObject.

Do read the guides if you want to learn more. And the API docs if you actually want to learn more.

Note: At the time of writing this answer current ember-cli version is @2.12.0

Improve this answer

1 Comment

"Read guides and API docs" is vague and unhelpful for me and all future viewers. I have read them through several times and still could not find a specific mention of custom js inclusion that does a simple task, like start a timer or display a console message. Where would your recommendation be based from within the guides/API? I seem to have skipped an important chapter!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.