codeclimate - eslint errors on ember app

Looking for some clarity around a few of these codeclimate ESLINT issues. They are lacking documentation on http://ift.tt/1hESthA.

I'm hesitant on just "excluding" or removing them from the .eslintrc as I'm sure they have worth, I just can't find a way to resolve them or read more about them.

• "Unable to resolve path to module 'ember'."
  • import Ember from 'ember';
• "'my-app' should be listed in the project's dependencies. Run 'npm i -S my-app' to add it"
  • import DateTimeMixin from 'my-app/mixins/controllers/datetime';
  • my-app is not an npm module, its just the project namespace/path.
• "'ember-data-url-templates' should be listed in the project's dependencies, not devDependencies."
  • import UrlTemplates from 'ember-data-url-templates';
  • How is this determined? Dependencies are automatically added to devDependencies when something like ember install ... is run.

Appreciate any insight/clarity!

Implementing user login and registration using ember-simple-auth

I have an API with two URLs:

1. /api/auth/login
2. /api/auth/signup

I am able to implement user login using ember-simple-auth and ember-simple-auth-token with the following code:

components/login-form/template.hbs

  
  
  

  
    
      <strong>Error: </strong> 
    
  

  

components/login-form/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  session: Ember.inject.service(),

  actions: {
    authenticate() {
      var credentials = this.getProperties('identification', 'password', 'secret'),
      authenticator = 'authenticator:token';

      console.log(this.get('session').get('isAuthenticated'));

      this.get('session').authenticate(authenticator, credentials).catch((reason) => {
            this.set('errorMessage', JSON.stringify(reason.error.message));
          });
        }
      }
});

config/enviroment.js

  ENV['ember-simple-auth'] = {
    authorizer: 'authorizer:token'
  };

  ENV['ember-simple-auth-token'] = {
    refreshAccessTokens: true,
    timeFactor: 1000,
    refreshLeeway: 300,
    identificationField: 'name',
    passwordField: 'password',
    secretField: 'secret',
    serverTokenEndpoint: 'http://ift.tt/2mv7NJV',
    tokenPropertyName: 'token',
    authorizationPrefix: 'Bearer ',
    authorizationHeaderName: 'Authorization',
    headers: {},
  };

I can't seem to find any docs online that implement both user registration and login that I can follow properly. Most of the tutorials I find have user login/registration using the same authenticator and same URL (/api/auth/user) but in my case I have two URLs one for each action.

What would be the proper way to handle this situation?

Thanks.

pinterest like grid using ember

I am trying to create pinterest like grid for my web app. I guess on mobile devices it should show two columns and more on large devices.

I have tried using ember-collection but for that i need to know the height of the cards(i need to show cards in the grid) which is not possible for me. I tried using bootstrap after that. Below is my code with bootstrap but it is rendering single column only

<div class="row">
  
     
    
 </div>

Could you please let me know where i am doing mistake?

What can be done about ember actions that may be fired after the user has transitioned to a new route?

I am having a problem with actions that occur asynchronously occasionally not getting handled.

In my Ember app I sometimes receive the error:

Nothing handled the action 'X'. If you did handle the action, this error
can be caused by returning true from an action handler in a controller,
causing the action to bubble.

Where X is the name of some action. The problem is not that the action is bubbling or that the handler is not defined, because it works almost all the time.

The problem, rather, relates to to fact the this.send('X') is called in a promise callback, e.g., after saving a model:

model.save().then(() => {
    this.send('X');
});

If the save encounters some network congestion or a delay on my server then the user might have navigated to another route by the time the promise is resolved. And that route might not have an action X defined (or worse perhaps it's the wrong action of the same name).

Is using actions here a fundamental design flaw?

If so, this would seem to severely limit the utility of actions, because they couldn't be used in any asynchronous context.

Or is there some way that transitions out of a route can delayed until any pending async stuff is resolved? (though this might create it's own undesirable symptoms)

Ember.js: Animating the deletion/removal of an item or record

I'm on Ember 1.13, using ember-liquid-fire for some other things, but with this, I want to animate deleting a record by fading or sliding it out. As it is right now, it just immediately disappears, which is a little jarring.

Here's the UI; the template is just using an helper to iterate over the model

Here's my delete action:

delete: function(item) {
  this.get('model').removeObject(item);
  item.destroyRecord();
}

It was suggested elsewhere to use but I'm not sure where to put it in my markup since I'm using a table, and the wraps the <tr>, so if I put the liquid helper around that, then there's divs as children of my table instead of rows.

If someone knows how to do this (using liquid-fire or another way), I'd love to know!

How to accept a pdf file from server in ember

Consider the below URL:

http://localhost:4200/abc/secured/rest/name/166

This URL returns a PDF file from the server. Code is done to successfully trigger the service URL and get the response code as 200.

What code should be written in ember to capture the PDF file and prompt a save as window to the User for saving the PDF file in local machine.

How to debug emberjs computed property

Let's say i have a computed property that depends on other properties. How can i find out which change on dependency property triggers re-compute on my property. Other than that, is there any way to debug computed chaining?