Ember.js通過Ajax設置組件屬性數據JSON

我是Ember.js的新手，試圖通過那段漫長的學習曲線。我有一個組件，它具有一個注入服務，它可以進行Ajax調用。我可以成功接收JSON數據，並在承諾「THEN」返回後將其轉儲到控制檯中。（我對承諾也很陌生，對我也是如此）Ember.js通過Ajax設置組件屬性數據JSON

這是我的組件。我可以看到轉儲的數據，但是如何使用該JSON設置組件屬性並讓它在模板中可訪問？另外，爲什麼我不能在下面的函數中使用「this.get」？

import Ember from 'ember'; 
export default Ember.Component.extend({ 
    attr_types: Ember.inject.service('svc-attrtypes'), 
    atype_list: [], 
    actions: { 
     getATypes: function() { 
      this.get('attr_types').getTypes().then(function(json){ 
       console.log(json); 
       this.atype_list = json; 
       console.log(this.atype_list); 
       // below returns: TypeError: this.get is not a function 
       this.get('atype_list').pushObjects(json); 
      }); 
     } 
    }    

});

在我的模板我有這樣的：

{{#each atype_list.alltypes as |a|}} 
    <li>{{a.attr_type}} - {{a.attr_type_desc}}</li> 
{{/each}}

如果我手動把我的JSON到atype_list它完美地顯示了模板。但是如果我在Ajax返回後嘗試設置它，除了在控制檯輸出中，什麼也不顯示。

我很感激任何幫助。我相信我錯過了一件簡單的事情。（或者更有可能，我只是想全部弄錯）

來源

2015-10-14 gregthegeek

This更改爲匿名函數傳遞給then。您必須保存this或使用es6箭頭函數語法。

import Ember from 'ember'; 
const { service } = Ember.inject; 

export default Ember.Component.extend({ 
    attrTypes: service('svc-attrtypes'), 
    atypeList: [], 
    actions: { 
     // es6 version 
     getATypes(){ 
      this.get('attrTypes').getTypes().then(array => { 
       this.set('atypeList', array); //replaces original array 
       this.get('atypeList').pushObjects(array); // adds array's elements to the end 
      }); 
     } 
     // es5 version 
     getATypes: function() { 
      var _this = this; 
      this.get('attrTypes').getTypes().then(function(array){ 
       _this.set('atypeList', array); 
      } 
     } 
    } 
});

你寫道，你是新來的燼，所以我添加了一點語法糖。如果您還不知道，請檢查ember-cli。

來源

2015-10-15 00:00:18 Keo

太棒了！我不敢相信我沒有想到這件事！不知怎的，我更想掛上Ember鉤。非常感謝額外的「糖」！是的，ES6也很新穎，我閱讀的大部分內容都令人困惑。將其添加到我的學習列表中。謝謝！ – gregthegeek

Ember.js通過Ajax設置組件屬性數據JSON

回答

相關問題