Ember.Component.set不更新模板

我有一個組件顯示一個對象的值。該對象被裝載到Ember.$.ajaxstringsEmber.Component.set不更新模板

因爲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會正確顯示文本，但是當我訪問該網頁直接（或刷新）它不會。根據console.log和調試，value得到正確設置，但模板不更新。

我正在做一些根本性錯誤或應該這樣工作嗎？以後是否可以使用this（通過異步回調）？如果不是，我將如何更新我的元件值？

來源

2015-05-04 KoKuToru

是否有任何異常/使用上面的代碼在控制檯中的錯誤？ – lsowen

@Isowen沒有錯誤/例外 – KoKuToru

我認爲你的問題不是從Ember的角度來看你的代碼的整體功能，而是 willInsertElement的Ember.run()部分沒有引用該組件。

有兩種方式來處理這個：

使用佔位符變量（通常是self）持有可裏面的其他「內在」功能進行訪問的this值。
使用bind來更改this所指的內容。

選項1：

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

選項2：

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

來源

2015-05-04 17:14:14 lsowen

我正在使用ES6箭頭函數，它就像「選項1」。如果你檢查轉碼的JavaScript（ES5）。 – KoKuToru

問題解決了，一個第三方的庫而改變的 {{u-button}} DOM結構..

來源

2015-05-05 13:57:11 KoKuToru

Ember.Component.set不更新模板

回答

相關問題