麻煩與灰燼使用塊部件JS

我有困難得到一個語義UI位於的塊部件內部在灰燼JS工作（1.12.2）jQuery的下拉按鈕語義UI/jQuery的下拉按鈕（1.11.0 ）。我認爲我理解了將jQuery綁定到Ember中的元素的運行循環問題，但在這種情況下，我認爲有些細微差別正在發生，我不知道。麻煩與灰燼使用塊部件JS

我有叫我的組件這樣的一個模板：

{{#sui-button-dropdown colour="black" icon="retweet" text="Change Status"}} 
    {{#each status in applicationStatuses}} 
     <div class="item"> 
      <div class="ui {{status.colour}} label"></div> 
      {{status.description}} 
     </div> 
    {{/each}} 
{{/sui-button-dropdown}}

我的部件js代碼如下：

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    didInsertElement: function() { 
     Ember.run.scheduleOnce('afterRender', this, function() { 
      this.$().dropdown({action: 'select'}); 
     }); 
    }, 
    actions: { 
     changeStatus: function() { 
      this.$().dropdown('toggle'); 
     } 
    } 
});

而且我的組件.hbs的看法是：

<div class="ui {{colour}} labeled icon dropdown button" {{action: 'changeStatus'}}> 
    <input type="hidden" value="{{value}}" /> 
    <i class="icon {{icon}}"></i> 
    <span class="text">{{text}}</span> 
    <div class="menu"> 
     {{yield}} 
    </div> 
</div>

的「applicationStatuses」結合經由余燼數據從API異步拉入，所以是一個承諾。我已經把jQuery的結合.dropdown（）內的「didInsertElement」功能，以確保承諾已經返回列表已經呈現它也被安排在運行循環「AfterRender階段」的下一次迭代。

然而，當我點擊下拉按鈕沒有出現下拉列表。沒有錯誤，dropdown（）函數肯定會在下拉按鈕元素上被調用，因爲我已經檢查過了。我懷疑我錯過了一些東西，dropdown（）jQuery方法在返回「applicationStatuses」集合的AJAX調用之前綁定，這意味着該列表在運行時未被填充。

如果我把所有這一切都出了成分，並在父控制器創建所有/模板按鈕下拉作品，但組件去，所以我會很感激的任何幫助，任何人都可以提供的方式。

謝謝。

來源

2015-05-08 danr1979

是你的「changeStatus」不會被調用？ – Sushant

我最終解決了這一問題得到解決。這個問題是由於我忘記了Ember組件將他們的htmlbars模板包裝在一個div中（這可以被自定義爲一個不同的標籤，但默認情況下它是一個div）。這意味着當我打電話給我的jQuery下拉方法時，它會在包裝器div &上調用而不是.ui.dropdown.button div，從而導致它失敗。

我用此修復程序是從htmlbars模板&去除包裝的div使用「類名」組件的JS文件的&「classNameBindings」屬性，以正確的類添加到燼包裝。

來源

2015-05-08 15:59:55 danr1979

修復後，{{action：'changeStatus'}}在哪裏？ –

我在組件中刪除了它及其關聯的操作，因爲語義UI自動處理切換下拉菜單。 – danr1979

它可以，如果你改變線路

{{action: 'changeStatus'}}

這個

{{action: 'changeStatus' target='view'}}

來源

2015-05-08 09:50:02 Sushant

感謝您的幫助，但這沒有奏效。問題不在於「changeStatus」動作未被調用，而是即使動作確實被調用，下拉也不會出現。 – danr1979

麻煩與灰燼使用塊部件JS

回答

相關問題