动态内容加载视图

Question

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

目前，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); 时向 table 添加一行。目前 - 我看到视图正在等待所有内容返回。

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

Answer 1

更新：

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

在此演示中，我下载了您的 github 数据和存储库列表，因此模型挂钩将 return 当两个 api 调用 returned 时。 ..最后它将提供回购名称列表。

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

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

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

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

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

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

创建组件

$ 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 响应中，我们将 returned Objects 推送到 downloaded 数组中，因此它总是会添加到列表中。

动态内容加载视图

Dynamic content loading view

javascript

ember.js

ember.js-view