Question

情况是我有一个登录屏幕，除非登录失败（401未授权），否则无效。基本上它现在非常简单，车把（模板）试图从路线访问属性以确定对后端（轨道）的调用是否失败。

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

Route文件看起来像这样，我省略了任何不需要的敏感代码或工作代码：

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非常陌生，现在只用了一个多星期，所以任何帮助都会很棒。

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

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

Answer 1

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

{{1}}

Demo.

Answer 2

您无法在相应的模板中使用路线的属性。您可以使用控制器来实现此目的，也可以使用模型钩子传递所有参数。

我认为，更好的选择可能是制作您的路线＆＃39;模板尽可能虚拟，以便它们只将数据和所需的操作处理程序传递给组件。

我们的大部分路线＆＃39;模板只包含一个组件，所有逻辑都位于组件及其内部组件上。除非需要服务器调用，否则所有事件处理程序也位于组件中。因此，您最好将此代码移至登录组件：

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

比您的路线模板更像：

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

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

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

2 个答案: