在 Ember 中成功 $.ajax 后，控制器值不可用于模板

Question

在对余烬数据感到非常沮丧之后，我正在尝试一种更简单的方法来获取和显示Ember中的数据。我使用 $.ajax(( 在控制器中加载数据并更新控制器的 title 属性。这行得通。但是，模板永远不会更新。 它显示"旧值"。

需要执行哪些操作才能使模板看到新值？

我正在使用余烬 3.1

// controllers/index.js
import Controller from '@ember/controller';
export default Controller.extend({
title:'Old Value',
getData: $.ajax(
{
type: "GET",
url:"https://jsonplaceholder.typicode.com/posts/1",
success: function(data) {
console.log("success", data);
this.title = data.title;
console.log("title: ", this.title); // logs new value: 'sunt aut fac..'
}
}
)
});

模板

// templates/index.hbs
<h1>this is the index route</h1>
<h3>Title is: {{title}}</h3>

Answer 1

为了完整起见，我将在这里介绍两种方法，一种使用余烬数据，另一种不使用。首先没有。

Ember 控制器在生命周期挂钩方面几乎没有灵活性，尤其是与组件相比。但是，您可以在此处使用 init 方法来解决此问题。例如，您可以像这样重写上述内容：

init() {
this._super(...arguments);
$.ajax({
type: 'GET',
url: 'https://jsonplaceholder.typicode.com/posts/1',
success: data => this.set('title', data.title),
});
},

在这种情况下，您具有对正确this的引用，并且将在应用程序加载时发出请求(与当前实现相同(。

现在，要用余烬数据来执行此操作，我们只需将以下内容添加到您的路由中：

model() {
return $.ajax({
type: 'GET',
url: 'https://jsonplaceholder.typicode.com/posts/1',
});
},

这将返回 ajax 请求的结果作为控制器模型。因此，在控制器中，我们只是为我们期望的数据添加别名。

import { alias } from '@ember/object/computed';
...
title: alias('model.title'),

模型解析后，这将自动更新为标题。

Answer 2

你必须使用 setter 方法。请尝试this.set('title', data.title);。

此外，请确保您在success回调中使用箭头(即。() => {}(，以便绑定到正确的对象。

Answer 3

你的代码有很多问题。

1. 目前，您的$.ajax调用仅运行一次 - 非常早，当 Ember 初始化控制器时，甚至更早。

2. this里面success回调不是controller，而是别的东西。一些jquery对象甚至window(不想深入研究jquery文档来找出到底是什么(。

3. 在 Ember 中model我们使用路由钩子来获取数据，因为每次用户访问路由时都会调用它。

看来您的问题不是余烬数据。您的问题是您没有阅读文档或没有尝试理解它。