Question

我有一个显示对象值的组件。此对象将Ember.$.ajax加载到strings

中

因为strings是异步加载和/或可以在运行时更改（不是在此示例中），所以我使用.done()来获取我需要的值。

一个简单的模板可以正常工作

{{u-string name="test_value"}}

但是如果嵌套{{u-string}}的组件为{{yield}} s，它不会更新模板。

 {{#u-button}}
     {{u-string name="test_btn"}}
 {{/u-button}}

这是我的简化组件代码：

import Ember from 'ember';

var strings = Ember.$.ajax({
        url: '/api/strings'
    });

export default Ember.Component.extend({
    tagName: 'span',
    value: '?',
    count: null,

    willInsertElement: function() {
        console.log("Strings wait for \"" + this.get('name') + "\"");
        strings.done((value) => {
            Ember.run(() => { 
                var s = value[this.get('name')] || this.get('name');
                console.log("Strings got \"" + s + "\" for \"" + this.get('name') + "\"");
                this.set('value', s);
            });
        }); 
    }
});

以下是我的{{u-string}}模板：

{{value}}

如果我transitionTo它将正确显示文本，但是当我直接访问页面（或刷新）时，它不会。根据{{1}}和调试，console.log设置正确，但模板无法更新。

我做了一些根本错误的事情还是应该这样做？以后是否可以使用value（通过异步回调）？如果不是，我将如何更新我的组件值？

Answer 1

我认为您的问题不是来自Ember观点的代码的整体功能，而是this Ember.run()部分willInsertElement中的self没有引用组件。

您有两种方法可以解决这个问题：

使用占位符变量（通常为this）来保存this的值，该值可以在另一个内部访问＆＃34;内部＆＃34;功能。
使用bind更改willInsertElement: function() { var self = this; console.log("Strings wait for \"" + this.get('name') + "\""); strings.done(function (value){ Ember.run(function(){ var s = value[self.get('name')] || self.get('name'); console.log("Strings got \"" + s + "\" for \"" + self.get('name') + "\""); self.set('value', s); }); }); }所指的内容。

选项1：

willInsertElement: function() {
    console.log("Strings wait for \"" + this.get('name') + "\"");
    strings.done(function (value){
        Ember.run(function(){ 
             var s = value[this.get('name')] || this.get('name');
            console.log("Strings got \"" + s + "\" for \"" + this.get('name') + "\"");
            this.set('value', s);
        }.bind(this));
    }.bind(this)); 
}

选项2：

trim()

Answer 2

解决了这个问题，第三方图书馆改变了dom的结构 {{u-button}} ..

Ember.Component.set不会更新模板

2 个答案: