成员-如何将属性从路由文件传递到带401返回的工具栏模板

Question

情况是，我有一个登录屏幕，这是工作的，除非有一个失败的登录(401没有授权)。基本上现在非常简单，手键(模板)试图从路由访问属性，以确定对后端(rails)的调用是否失败。

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

路由文件如下所示，我省略了任何不需要的敏感代码或工作代码：

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', '');
}
});

我已经做了一些调试，它确实碰到了ajax承诺中的错误块，但是它似乎是一塌糊涂。我相信它失败了，因为它是401，有限的资源使我得出这个结论。

您可以看到，loginFailed是我试图更改的属性，当发生401错误时，在模板上这是我要访问的属性。

我对Ember来说是个新手，只是工作了一周多一点，所以任何帮助都会令人惊讶。

下面是我在我的项目中运行-v时使用的版本：

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

Answer 1

您必须设置控制器的属性，而不是路由。

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

演示。

Answer 2

不能在相应的模板中使用路由的属性。您可以为此使用控制器，也可以使用模型挂钩传递所有参数。

我认为，更好的选择可能是将路由的模板尽可能地作为虚拟模板，这样它们就可以将数据和所需的操作处理程序传递给组件。

我们的大多数路由模板只包含一个组件，所有的逻辑都位于组件及其内部组件上。所有事件处理程序也都位于组件中，除非它们需要服务器调用。因此，最好将此代码移动到登录组件中：

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

你的路线模板会是这样的：

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

所有其他逻辑都将在组件的js文件中。