Ember與組件的標籤

我正在嘗試編寫一個Ember.Component來處理Bootstrap樣式的選項卡。我將它作爲一個可重複使用的TabHolderComponent實現，它將一個數組作爲參數，並輸出每個項目一個選項卡，然後每個項目輸出一個內容容器（àBootstrap）。到目前爲止它運行良好，但我也需要能夠使用選項卡中的按鈕來刷新選項卡中的內容。是否有一種將更新事件/操作發送給子組件的優雅方式？Ember與組件的標籤

我對此有幾種不同的解決方案（將刷新按鈕移動到組件中，這將不太方便用戶，或者綁定父組件refresh屬性，該屬性包含應刷新的選項卡的名稱，組件觀察），但沒有一個是優雅的。

我也看到this suggestion，但不知道如何爲動態創建的選項卡工作，我無法將選項卡名稱硬編碼爲父組件屬性。

來源

2014-09-27 Samuel Lindblom

您可以使用可觀察模式（與本文所述內容類似）。

{{my-thing parent=controller}} 

App.MyThingComponent = Em.Component.extend({ 
    setup: function(){ 
    this.get('parent').register(this); // you should check to see if parent exists, I'm lazy 
    }.on('init'), 
    sayHello: function(){ 
    console.log('hello'); 
    } 
});

而在父控制器（陣列，對象，或簡單的控制器）

App.FooController = Em.Controller.extend({ 
    observers: null, 
    setup: function(){ 
    this.observers = []; 
    }.on('init'), 
    register: function(observer){ 
    this.observers.pushObject(observer); 
    }, 
    talkToChildren: function(){ 
    this.observers.forEach(function(child){ 
     child.sayHello(); 
    }); 
    } 
});

實施例：http://emberjs.jsbin.com/yoyod/1/edit

來源

2014-09-27 16:11:46 Kingpin2k

感謝您的答覆，看起來像一個很好的建議。然而，我想保留組件中的所有組件特定邏輯，並且如果可能的話不涉及控制器，以使它們易於重用。 – 2014-09-27 18:38:49

除了使用觀察者模式外，沒有其他方式可以與組件之外的組件進行通信。 – Kingpin2k 2014-09-27 19:23:19

Ember與組件的標籤

回答

相關問題