Question

我觉得this.set没有更新组件很奇怪。模板代码是这样的：

{{#each data as |d|}}
    <span value={{d.key}} class="checked-normal" onclick={{action 'chooseBp' d.key}}>
        {{d.value}}
    <i class="fa checked-i"></i>
    </span>
{{/each}}

js就像：

export default Ember.Component.extend({
didReceiveAttrs(){
        this.initData();
},
initData(){
        let bpIds = this.get('bpIds'),
            data = [],
            length = bpIds.length;
        for (var i = 0; i < length; i++) {
            let uri = "this is a uri";
            let key = bpIds[i];
            /* jshint loopfunc:true */
            $.getJSON(uri).then((result) => {
                let o = {
                    key:parseInt(key),
                    value:result.result.name
                };
                data.push(o);
            });
        }
        this.set('data',data);
    }
});

此组件用于获取数据并使用bp_ids呈现自身。

然而，当我改变这样的js时，我发现它有效：

export default Ember.Component.extend({
didReceiveAttrs(){
        this.initData();
},
initData(){
        let data = [];
        data=[
        {key:1,value:'value1'},
        {key:2,value:'value2'}]
        this.set('data',data);
    }
});

我真的不知道为什么。当我想从组件的后端获取数据时，如何使组件工作？

Answer 1

didReceiveAttrs挂钩将被调用进行初始渲染并重新渲染。
可以在init方法
数组初始化应该在init方法（安全的方法）
对于阵列更新，请使用pushObject代替push
在做了一些挑剔之后，你的组件代码如下所示：

export default Ember.Component.extend({ data: null, init() { this._super(...arguments); this.set('data', []); let bpIds = this.get('bpIds'), length = bpIds.length; for (var i = 0; i < length; i++) { let uri = "this is a uri"; let key = bpIds[i]; /* jshint loopfunc:true */ $.getJSON(uri).then((result) => { let o = { key: parseInt(key), value: result.result.name }; this.get('data').pushObject(o); }); } } });

Ember组件this.set（）选择重新渲染

1 个答案: