Ember.js开发报错：Uncaught ReferenceError: Controller is not defined

我正在用Ember.js开发一款Web应用，流程是获取登录信息后跳转到其他页面，但在执行登录逻辑和路由跳转时遇到错误：Uncaught ReferenceError: Controller is not defined。

以下是相关代码：

登录控制器代码 #

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
//import EmberResolver from 'ember-resolver';
import Ember from 'ember';
import $ from 'jquery';

export default class LoginsController extends Controller {
  @tracked result = 0;
  @service router;
  //canLogin:true;
  @action
  get() {
    var that = this;

    var uname = document.getElementById('uname').value;
    var mobile = document.getElementById('mobile').value;
    console.log('name ->' + uname);
    console.log('mobile ->' + mobile);
    $.ajax({
      url: 'http://localhost:8080/hotelres/AuthenticationServlet',
      method: 'GET',
      data: { uname: uname, mobile: mobile },
      success: function (response) {
        that.result = response;
        console.log('response-> ' + response);
        if (that.result == 1) {
          alert('sucess');
          that.transitionToRoute('roomselect');//----> routing
          console.log(that.result);
        } else {
          alert('Login failed');
        }
      },
      error: function (xhr, status, error) {
        var errorMessage = xhr.status + ':' + xhr.statusText;
        alert('error' + errorMessage);
      },
    });
  }
}

Roomselect控制器代码 #

import { use, resource } from 'ember-resources';
import { tracked } from '@glimmer/tracking';

class RequestState {
  @tracked value;
  @tracked error;

  get isPending() {
    return !this.error && !this.value;
  }
}

export default class RoomselectController extends Controller {
    @service router;

    @use request = resource(({ on }) => {
      const mobile = '123123123';
      const state = new RequestState();
    
      $.ajax({
        url: 'My',
        method: 'GET',
        dataType: 'json',
        data: { mobile },
        success: (response) => state.value = response ,
        error: (xhr, status, error) => state.error = `${status}: ${xhr.statusText}`,
      });

      return state;
    });

    get result() {
      return this.request.value || [];
    }
}

Roomselect模板（.hbs）代码 #

{{#if this.request.isPending}}
  loading data...
{{/if}}

<table border="1">
  <thead>
    <tr>
      <th>Capacity</th>
      <th>Price</th>
      <th>Room Type</th>
      <th>Room No</th>
    </tr>
  </thead>
  <tbody>
   
    {{#each this.result as |row|}}    
      <tr>
        {{#each-in row as |key value|}}
          {{value}}
        {{/each-in}}
      </tr>
    {{/each}}
  </tbody>
</table>

路由配置（router.js）代码 #

import EmberRouter from '@ember/routing/router';
import config from 'embu/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function () {
  this.route('logins', function () {
    this.route('testt');
  });
  this.route('register');
  this.route('succcess');
  this.route('error');
  this.route('roomselect');
});

错误原因及修复方案 #

报错Controller is not defined的核心原因是Roomselect控制器未导入Controller基类，同时还缺少service装饰器的导入，也未引入jQuery（代码中使用了$.ajax）。

修正后的Roomselect控制器代码如下：

import Controller from '@ember/controller';
import { use, resource } from 'ember-resources';
import { tracked } from '@glimmer/tracking';
import { service } from '@ember/service';
import $ from 'jquery';

class RequestState {
  @tracked value;
  @tracked error;

  get isPending() {
    return !this.error && !this.value;
  }
}

export default class RoomselectController extends Controller {
    @service router;

    @use request = resource(({ on }) => {
      const mobile = '123123123';
      const state = new RequestState();
    
      $.ajax({
        url: 'My',
        method: 'GET',
        dataType: 'json',
        data: { mobile },
        success: (response) => state.value = response ,
        error: (xhr, status, error) => state.error = `${status}: ${xhr.statusText}`,
      });

      return state;
    });

    get result() {
      return this.request.value || [];
    }
}

额外检查点 #

1. 确保项目已安装jQuery：执行ember install ember-jquery完成安装
2. 登录控制器中的transitionToRoute可正常使用，因为已正确注入router服务
3. 模板中的{{#each-in}}语法符合Ember版本要求，确保模板渲染逻辑正常

内容的提问来源于stack exchange，提问作者hariharan baskaran