动态内容加载视图

Question

我有一个包含一个表的模板的一个烬组件。在我的组件中 - 我想发出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> 

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

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

Answer 1

更新：

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

在本演示中，我下载你的github上的数据，和回购的名单，因此模型钩将返回当两个API调用返回......最后它将提供回购商品名单。

使用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或第三方服务？在这种情况下，您可以在组件中注入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响应，我们推downloaded数组中返回的对象，所以它总是添加到列表中。