余烬 - 如何将属性从路由文件传递到返回 401 的车把模板

Ember - How to pass a property from Routes file to a Handlebar template with 401 returned

本文关键字：返回 属性 文件 路由 余烬      更新时间：2023-09-26

情况是我有一个登录屏幕，除非登录失败（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 很陌生，现在只工作了一个多星期，所以任何帮助都会很棒。

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

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

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

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

演示。

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

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

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

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

比您的路线模板将是这样的：

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

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

相关文章：