1

I'm using Ember 2.7.0 of course with ember-cli.

I come from Rails, I used to put in "assets/application.js" all my javascript like, for example:

var ready = function () {

    myFunction('test');

    $('#btn-fluid').on('click', function () {
        $('#myPage').toggleClass('container')
    });
}

document.addEventListener("turbolinks:load", function () {
    ready()
})

Now with Ember where I have to put this code in my application?

I read on the web the use of:

Ember.Application.create({
   ready: function () {
});

but I don't know how to put this code: in app.js maybe, but I already have:

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver
});

and if I create another file in the root, like for example "mycode.js" like this:

import {Ember} from 'ember';

let myCode;

myCode = Ember.Application.create({
  ready: function () {
    console.log('Test!');
  }
});

export default myCode;

and import it in application using ember-cli-build.js here:

... app.import('mycode.js');

it compile the big js with my code, but it doesn't work at all my ready function.

How to do?

I have to use Components? Maybe an application component?

Which is the best Ember way for top performances?

Improve this question
3
  • 1
    I would suggest to spend some time going through EmberJS guide. Unlike jQuery where you can start with basic knowledge and then learn the api, Ember works on convention and have some concepts that are necessary to understand before starting development. Commented Sep 10, 2016 at 1:26
  • @Kashif, can you answer my question? Where would you put that code? In which file? Commented Sep 10, 2016 at 7:07
  • @JohnSam He is right. You don't just "put the code" when using Ember. You should read guides and get main concepts first. Commented Sep 10, 2016 at 23:54

1 Answer 1

Reset to default
4

To start working with Ember is a must to know Ember's structure and the way Ember works, Simply you need to use Ember guideline to get the best performance. I will explain you some steps and example and I hope it will help you to understand more.

First of all check this image

enter image description here

1. Review Ember Guides and API Docs

In addition, it's a good to review this repository on Github as well. https://github.com/emberjs/guides/ which will help developers to get used to Ember.

2. Install Ember-CLI

Ember-CLI is a command line interface which has been designed for creating Ember apps that strongly favor convention over configuration.

3. Install the Ember Inspector Extension

The Ember Inspector Extension is super-useful for debugging your Ember app.You may also find Chrome app on Google play.

4. Read “From Rails To Ember”

Since you know Ruby on Rails and you are a developer of that, it is essential that you read the tips compiled in From Rails To Ember.

5. Get to Know Ember.Component

A simple way to think of an Ember component is that it is a combination of controller and view, isolated and reusable:

You should pass in the state you need to the component.

Components should communicate with their parent scope (e.g, controller or another component) by sending actions.

Parent scope (e.g., controller or another component) communicates with the component by changing the data state that it has passed to the component.

As an example I am going to explain some part of your code. You have this 

 $('#btn-fluid').on('click', function () {
        $('#myPage').toggleClass('container')
    });

and probably this is your HTML code 

<a id="btn-fluid">Whatever for CLICK </a>
<div id="myPage" class="">dummy text </div>

However, in Ember what would be the best practice to use Actions in your Route or Controller to define your action function for example your code in Ember will be something like this : 

myPage: null,
actions: {
    clickOnbtnFliud() {
        this.set('myPage', 'container');
    }
  }

and HTML in the same template for the controller would be like 

<a {{action 'clickOnbtnFliud'}}>Whatever for CLICK </a>
<div class="{{myPage}}">dummy text </div>

In Summary, You may use Components as you need which is the best practice for your Ember Application but you need to understand where you have to create that.

You rarely need to edit Ember-Cli-Build.js unless you want to insert extra plugins library or ... but I don't recommend you to insert your internal JS files as you can simply convert it to Ember Native codes. For instance you don't need to do this app.import('mycode.js'); but you can simply create your Route and add your custom code like I said as an example before to your Route or Controller or Components.

What I can assure you is if you user Ember in the way that you can find in Guidelines in Ember website, You don't need to worry about performance.Just try to user Ember Native way to implement your code.

Last word, As much as possible keep yourself motivated to use EmberAddons rather than thirdparty plugins and always choose the best updated addons not all of them. Search for best Addons and popular ones and use it.

Hope this guide help you.

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

4 Comments

Ok, thanks @Majid for your abundant answer. But I need to know how to put code I use on every page, somewhere, like this: function myFuncICallEverywhere() {alert('Wow');} I need an application component? Is this the correct way? I need to load component on my application.hbs and then the javascipt in components/application.js?? Which is the correct way?
To access your function in all over your application you need to add that to application.js other in route or in controller nothing else. for example, the following code "session: Ember.inject.service('session')" in Controller makes us using session in whole pages. But there is no application.js component and you don't need to do that. Only create component for those functions that you need rescue them whenever you use your component will be called.
if you create a component with Ember-Cli like "ember g component my-component --pod" then you have a component name "my-component"and you are able to directly use {{my-component}} where you need that either in index page or contact or ... , Keep in mind to just update component.js with your desired functions and component.hsb with your desired HTML
@JohnSam What code? If this is a DOM manipulation, it's recommended to create a component and manipulate DOM inside it's didInsertElement hook. If this is just a function that returns smth, you can create an utility. If you need to store and manipulate some data globally, you create a service.

Your Answer

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