Question

我有一个带有包含表格的模板的ember组件。在我的组件中 - 我想向第三方服务发出ajax调用并获取一些数据。获取此数据后，我将不得不根据输入进行另一个后续的ajax调用。由于这需要时间，我想在ajax调用完成后一个接一个地更新视图。从视觉上讲 - 这将在处理一个请求后向表中添加一个新行。

目前，ember只允许我们通过路由器中的model()方法传递数组对象。

我查看了几个项目，例如List-view，但它没有解决上述问题。

编辑： -

以下是我目前正在做的事情 -

import Ember from 'ember';
export default Ember.Route.extend({
    model() {
        var list = [];
        var promise = $.ajax({
            type: 'GET',
            url: 'thirdPartyService'
        });
        promise = promise.then(function(data){
            data = JSON.parse(data);
            return data[1];
        });
        promise.then(function(data){
            for (var i = 0; i < data.length; i++) {
                var idea = data[i];

                var url = "thirdPartyService";
                var secondPromise = $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: "text"
                });
                secondPromise = secondPromise.then(function(data){
                    var result = x2js.xml_str2json(data);
                    return result;
                });
                secondPromise.then(function(data){
                    list.pushObject(item);
                });
                return secondPromise;
            }
        });
        return list;
    }
});

我的模板

<tbody>
{{#each model as |idea|}}
  <tr>
    <td><input type="checkbox" name="id" value="{{idea.id}}"></td>
    <td>{{idea.field4}}</td>
    <td>{{idea.field5}}</td>
    <td>{{idea.field}}</td>
    <td>{{idea.field2}}</td>
    <td>{{idea.field3}}</td>
  </tr>
{{/each}}
</tbody>

列表更改时将呈现Ember视图。我想要做的是 - 在调用list.pushObject(item);时向表中添加一行。目前 - 我看到视图正在等待所有内容都返回。

此外，这个应用程序是一个电子应用程序 - 由于这个我没有每个说的后端，我没有使用余烬数据。我打电话给第三方服务，所以没有涉及任何余烬模型。

Answer 1

更新

演示：https://ember-twiddle.com/eb79994c163dd1db4e2580cae066a318

在这个演示中，我下载了你的github数据和repos列表，所以当api调用返回时，模型钩子将返回...最后它将提供repo名称列表。

使用loading.hbs加载消息会自动出现，直到模型挂钩承诺解决。

在你的代码中，可能覆盖promise变量不是最好的方法，因为你覆盖了尚未解析的变量。

如果您希望获得更好的用户体验，最好只要您在模型中只有一个ajax调用，并返回该承诺...所以您的模型包含第一个承诺结果...并且您可以使用此数据在控制器中触发一个promise并下载列表，这样用户就可以看到表的标题和加载消息，直到下载列表为止。

使用第二页扩展演示：https://ember-twiddle.com/eb79994c163dd1db4e2580cae066a318

如果您需要在页面中处理更多模型，我会使用RSVP.hash在路由处理程序中下载它们。

// for example: app/routes/books.js, where books are the main model
import Ember from 'ember';

export default Ember.Route.extend({

  model() {
    return Ember.RSVP.hash({
      books: this.store.findAll('book'),
      authors: this.store.findAll('author'),
      libraries: this.store.findAll('library')
    });
  },

  setupController(controller, model) {
    const books = model.books;
    const authors = model.authors;
    const libraries = model.libraries;

    this._super(controller, books);

    controller.set('authors', authors);
    controller.set('libraries', libraries);
  },
});

在上面的示例中，您的控制器中有model（带有书籍列表），authors和libraries，因此您可以将这些数组传递给组件。

您是否使用Ember Data访问服务器API或第三方服务？在这种情况下，您可以在组件中注入store服务，并像在路由处理程序中一样使用它。

使用关闭操作的其他选项，因此您的操作将在控制器中，您可以从组件调用这些操作，因此所有组件仅负责查看数据和其他片段。

在下面的示例中，我们创建了一个自包含的组件，其中有一个触发操作的按钮，该操作将使用经典的jquery ajax调用从服务器下载数据，该调用包含在promise中，因此您可以链接这些承诺并连续解雇。

创建组件

$ ember g component my-component

模板app/templates/components/my-components.hbs，带有按钮，标志和列表。

<button {{action 'downloadSomething'}}>Download</button>

in progress: {{downloadInProgress}}

{{#each downloaded as |item|}}
  {{item.name}}
{{/each}}

连接的js文件app/components/my-components.js

import Ember from 'ember';

const { $ } = Ember;

export default Ember.Component.extend({

  downloaded: [],

  actions: {

    downloadSomething() {
      this.set('downloadInProgress', true);

      this._getData('http://localhost:8080').then(
        (response) => {
          this.set('downloadInProgress', false);
          this.get('downloaded').pushObjects(response.contacts);
        },
        (error) => {
          // some error handling...
        }
      );
    }
  },

  // this function wraps the ajax call in a Promise
  _getData(url) {
    return new Ember.RSVP.Promise((resolve, reject) =>
      $.ajax(url, {
        success(response) {
          resolve(response);
        },
        error(reason) {
          reject(reason);
        }
      })
    );
  }

});

在ajax响应中，我们在downloaded数组中推送返回的对象，因此它总是会添加到列表中。

动态内容加载视图

1 个答案: