javascript - 无法在 ember js 中从 servlet 渲染 json 数组

Question

我正在尝试呈现一个从 ember 中的 java servlet 发送的 json 数组。工作流程如下

1.向将返回jsonobject的servlet发送ajax请求

2.i 将获取 json 对象并尝试在 handlebar 文件中呈现

问题是当我安慰带有索引的响应时

0: {CAPACITY: '4', PRICE: '918', RTYPE: 'basic', ID: '4'}
1: {CAPACITY: '2', PRICE: '885', RTYPE: 'villa', ID: '8'}
2: {CAPACITY: '2', PRICE: '1579', RTYPE: 'villa', ID: '5'}
3: {CAPACITY: '1', PRICE: '1526', RTYPE: 'villa', ID: '1'}

但是服务器发送的是什么

{"CAPACITY":"4","PRICE":"918","RTYPE":"basic","ID":"4"}
{"CAPACITY":"2","PRICE":"885","RTYPE":"villa","ID":"8"}
{"CAPACITY":"2","PRICE":"1579","RTYPE":"villa","ID":"5"}
{"CAPACITY":"1","PRICE":"1526","RTYPE":"villa","ID":"1"}

Controller 代码

export default class RoomselectController extends Controller {
    @service router;
    @tracked obj = null  ;
    @tracked price =0;
    get res(){
        var dis = this;
        const mobile = "123123123";
        $.ajax({
            url:'My',
            method : 'GET',
            dataType:'json',
            data : {mobile:mobile},
            success:function(response){
                console.log(response);
                dis.price = response[0].PRICE;//when rendered this works
                dis.obj = response;//when changed to dis.obj = response[0] it renders the first
                
                return response[0];
            },
            error: function(xhr,status,error){
                var errorMessage = xhr.status + ": " + xhr.statusText;
                alert("error " + errorMessage);
            }
        })
    }

.hbs 代码

<table border ="1">
    <tr><td><b>Capacity</b></td><td><b>Price</b></td><td><b>Room Type</b></td><td><b>Room No</b></td></tr>

    
    {{#each-in this.obj as |key value|}}    
    <td>{{value}}</td>
    {{/each-in}}

    </table>

它不工作但是当我使用dis.obj = response[0]它有效并仅呈现第一个索引如何让它渲染每一个数据？

Answer 1

JS + react 性中的异步有点不平凡——但是!有许多抽象可以提供帮助。

这是一个解决问题的视频/谈话，以及解决它的各种方法:“What is the hardest thing TIMING! about async?”——Jim Schofield，Emberconf 2022

要点如下:

• getter 不应该引起副作用(在 getter 中的 this 上设置任何东西)
• getter 永远不应返回 Promise。

关于我在您的代码中看到的内容的一些注释:

• getter，res，从未被访问过，所以它无法运行。
• getter，res，不返回任何东西，所以访问它没有意义——现代 ESLint 配置中有一个 lint 会提示 getter 没有返回一些东西
• 效果发生在 getter 中，这会使组件的整体状态不稳定——请记住，每次访问 getter 的内容都会重新运行——所以如果你有多个东西访问 this.res ，您将为每次访问创建新的 ajax 请求。
• 模板遍历对象，但忽略响应数组中的其他条目——不确定是否有意，但在下面的代码中，我假设您想遍历响应中的所有条目。

但是!将其转换成这样的东西并不需要太多工作

• 为异步生命周期建模(加载、成功、错误等)
• react 性地为您提供上述状态，并为您提供一些可以迭代的内容(您最终希望通过模板中的 each-in 来完成。

我最喜欢的方法是使用资源。

有几种方法可以使用库提供的实用程序实现您想要的功能 ember-resources .

使用实用程序，trackedFunction

这是一个包装资源原语并提供一些 async state 的实用程序.

使用此实用程序的代码如下所示:

import { trackedFunction } from 'ember-resources/util/function';

export default class RoomselectController extends Controller {
    @service router;

    request = trackedFunction(this, async () => {
      const mobile = '123123123';
    
      // I'm constructing a custom promise here
      // because I don't know if your $.ajax supports async/await
      return new Promise((resolve, reject) => {
        $.ajax({
          url: 'My',
          method: 'GET',
          dataType: 'json',
          data: { mobile },
          success: (response) => resolve(response),
          error: (xhr, status, error) => reject(`${status}: ${xhr.statusText}`),
        });
      });
    });

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

}

{{#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>

使用自定义Resource

您可以执行此操作的第二种方法是使用您自己的状态，由您创建并在自定义 resource 中使用.

使用相同的模板，您可以像这样实现自定义资源:

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 || [];
    }

}

引用资料

• (我的)Ember Cookbook for various concepts
• 演示 various component / template concepts
• information about Resources
• API docs对于 ember-resources(图书馆)