動態內容加載視圖

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數組中返回的對象，所以它總是添加到列表中。