ember.js 单击按钮并从输入文本中获取新值后更新模型挂钩值

zlhcx6iw  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(110)

新来的,

async model() {

let response = await fetch('http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=[APIKeyPlaceholder]);

var data = await response.json();

return data;

}

我正在使用openweathermap api获取当前的天气数据,并在api中传递城市参数。
我正在获取这个data值,并将其显示在.hbs文件中。现在我已经添加了一个输入文本字段和按钮,用于输入城市名称。我如何使用从.hbs文件中获取的新值更新城市名称和模型挂钩值(即数据值更新为从api fetch命令返回的值)?
我使用控制器吗?我如何绑定输入到成员变量?

t98cgbkg

t98cgbkg1#

我建议您将城市保存在URL中。这将允许用户将特定城市的视图添加为书签并进行共享。此外,它还允许您将路线配置为在查询参数的值发生更改时自动重新运行模型挂钩。
1.注册查询参数。这目前需要控制器:

import Controller from '@ember/controller';

export default class ArticlesController extends Controller {
  queryParams = ['city'];
}

1.在route的model钩子中使用query参数。它作为params对象的一部分传递,作为第一个参数传递。

async model({ city }) {
  let response = await fetch(
    `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=[APIKeyPlaceholder]`
  );
  const data = await response.json();
  return data;
}

1.将路由配置为只要city查询参数得值发生更改就重新运行model挂接:

import Route from '@ember/routing/route';

export default class ArticlesRoute extends Route {
  queryParams = {
    city: {
      refreshModel: true
    }
  };
}

1.通过触发一个转换来更新city查询参数。我用一个组件来说明这一点。但同样的方法也适用于控制器、路由甚至服务,因为它只依赖于transitionTo method of the RouterService

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class MyComponent extends Component {
  @service router;

  @action
  changeCity(city) {
    // This update query parameters of the current route.
    // If you want to redirect to another route, you can
    // pass the route and optional models as additional
    // arguments _before_ the options object.
    this.router.transitionTo({ queryParams: { city }});
  }
}

请在Ember.js官方指南的Query Parameter chapter中找到更多详细信息和解释。

相关问题