Ember.js由Ajax JSON设置的组件属性数据(Ember.js Component properties data set by Ajax JSON)

我是Ember.js的新手，并试图通过这个漫长的学习曲线。我有一个具有注入服务的Component，它进行Ajax调用。我可以成功接收JSON数据，并在承诺“THEN”返回后将其转储到控制台中。（我也是新的承诺，对我来说很光明）

这是我的组件。我可以看到转储的数据，但是如何使用该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返回后尝试设置它，除了在控制台输出中没有显示任何内容。

我感谢任何帮助。我确信我错过了一些简单的事情。（或者更可能的是，我只是把这一切都搞错了）

I have a Component that has an injected service, which makes an Ajax call. I can receive the JSON data successfully and can dump it into the console after the promise "THEN" returns.

Here's my component. I can see the dumped data, but how do I set the component properties with that JSON and have it accessible in the template? Also, why can't I use "this.get" in my function below?

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); }); } } });

In my template I have this:

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

If I manually place my JSON into the atype_list it shows perfectly on the template. But if I try to set it after my Ajax returns, nothing shows, except for in the console output.

I appreciate any help. I am sure I a missing something simple. ( or more likely, I'm just going about this all wrong)

最满意答案

This改变了传递给then匿名函数。您必须保存或使用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的新手，所以我添加了更多的语法糖。 如果您还不知道，请查看ember-cli 。

This changed with anonymous function passed to then. You have to save this or use es6 arrow function syntax.

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); } } } });

You wrote that you are new to ember, so I added little more syntax sugar. Also check ember-cli if you don't know about that already.

更多推荐