Ember - 如何将属性从Routes文件传递到Handlebar模板并返回401

Question

The situation is I have a login screen which works except when there is a failed login (401 not authorized). Basically it is very simple right now, the handlebar (template) is trying to access a property from the route to determine if the call to the back end (rails) failed.

{{#if loginFailed}}
  <div class="alert">Invalid username or password.</div>
{{/if}}

The Route file looks something like this, I have omitted any sensitive code or working code that is not needed:

import Ember from 'ember';
import ajax from 'ic-ajax';

export default Ember.Route.extend({

loginFailed: false,
isProcessing: false,

beforeModel: function(){
    //some stuff 
},

actions: {
login: function() {
    this.setProperties({
      loginFailed: false,
      isProcessing: true
    });
    var _this = this;

    ajax({
        url: //something,
        type: 'post',
        crossDomain: true,
        data: //some stuff,
  }).then(
            function(result) {
                //logging in logic all works
            },
            function(error){
                if (error.jqXHR.status === 401)
                {

                    _this.set('isProcessing', false);
                    _this.set("loginFailed", true);
                }
            }
        );


  },
},

reset: function() {
  this.set('isProcessing', false);
  this.controller.set('password', '');
  this.controller.set('username', '');
}
});

I've done some debugging and it does indeed hit the error block for the ajax promise however it just seems to crap out. I believe it craps out because it's 401, limited resources have led me to this conclusion.

You can see that loginFailed is the property I am trying to change and when 401 error happens, and on the template this is the property I am trying to access.

I am very new to Ember just working on it for little over a week now so any help would be amazing.

Here are the versions I am using when running ember -v on my project:

version: 1.13.8
node: 0.12.7
npm: 2.13.4
os: win32 x64

Answer 1

You have to set property on controller not route.

_this.set("controller.loginFailed", true);

Demo.

Answer 2

You cannot use a route's properties in the corresponding template. You can use controllers for this purpose or you can use model hook to pass all parameters.

I think, a better alternative might be making your routes' templates as dummy as possible so that they just pass data and needed action handlers to the components.

Most of our routes' templates contains only one component and all the logic lies on the components and their inner-components. All the event handlers also lie in the components unless they need server calls. So you should better move this code to your login component:

{{#if loginFailed}}
  <div class="alert">Invalid username or password.</div>
{{/if}}

Than your route's template will be like this:

{{my-login-component loginPressed="login" loginData=model}}

All the other logic will be in your component's js file.