Question

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

要使模板看到新值需要做什么？

我正在使用Ember 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-data，另一种不使用ember-data。首先没有。

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

init() {
  this._super(...arguments);

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

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

现在使用ember-data进行此操作，我们只需将以下内容添加到您的路线中：

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

您的代码有很多问题。

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

this

success不是controller，是另外一回事。一些jquery对象甚至是window（不想深入研究jquery文档来找出确切的内容）。
在Ember中，我们使用model路由钩子来获取数据，因为每次用户访问路由时都会调用它。

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

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

3 个答案: