javascript - 动态内容加载 View

Question

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

目前，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 View 。我想要做的是 - 当调用 list.pushObject(item); 时向表中添加一行。目前 - 我看到 View 正在等待所有内容返回。

此外，这个应用程序是一个电子应用程序 - 因此我没有后端，并且我没有使用 ember-data。我正在调用几个第三方服务，因此不涉及 ember-model。

Answer 1

更新:

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

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

使用loading.hbs，加载消息会自动出现，直到模型钩子(Hook) promise 解决为止。

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

如果您想要更好的用户体验，最好在模型中只有一个 ajax 调用，并返回该 promise ...因此您的模型包含第一个 promise 结果...并且您可以使用此数据在 Controller 中触发 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);
  },
});

在上面的示例中，您的 Controller 中有 model (包含书籍列表)、authors 和 libraries，因此您可以将这些数组传递给组件。

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

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

在下面的示例中，我们创建一个自包含组件，其中有一个按钮可以触发一个操作，该操作将使用经典的 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 数组中，因此它始终会添加到列表中。