0

我有一个带有包含表格的模板的 ember 组件。在我的组件中 - 我想向 3rd 方服务发出 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);被调用时向表中添加一行。目前 - 我看到视图正在等待返回所有内容。

此外，这个应用程序是一个电子应用程序——因此，我没有一个后端，而且我没有使用 ember-data。我正在调用几个 3rd 方服务，因此不涉及 ember 模型。

4

1 回答 1

1

更新：

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

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

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

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

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

演示扩展了第二页：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 或第 3 方服务？在这种情况下，您可以在组件中注入store服务并在其中使用，就像在路由处理程序中使用一样。

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

在下面的示例中，我们创建了一个自包含组件，其中您有一个按钮来触发一个操作，该操作将使用经典的 jquery ajax 调用从服务器下载数据，该调用包装在一个 Promise 中，因此您可以链接这些 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送到数组中，因此它总是会添加到列表中。

于 2016-04-15T12:15:23.270 回答