在Ember中通過ID獲取元素

我正在運行兩個應用程序。一個具有以下組件：在Ember中通過ID獲取元素

import Ember from 'ember'; 

export default Ember.Component.extend({ 
tagName: 'a', 

click: function() { 
    Ember.$('#wrapper').toggleClass('toggled'); 
} 
});

，另一種，有這樣一句：

import Ember from 'ember'; 

export default Ember.Component.extend({ 
tagName: 'a', 

click: function() { 
    this.$('#wrapper').toggleClass('toggled'); 
} 
});

什麼我不明白這是爲什麼在一個應用程序中使用Ember.$('#wrapper')我選擇由ID的元素，在其他使用this.$('#wrapper')。

這是怎麼回事？ Ember版本？

UPDATE

我很納悶，因爲這兩個部件是相同的：

{{#show-menu}} 
    <i class="fa fa-bars"></i>` 
{{/show-menu}}`

它們是用來隱藏側邊欄DIV兩個漢堡包菜單和#wrapper是外部元素。

因爲在這兩種情況下，#wrapper都是外部元素，不應該只是第一個案例工作@Gaurav和@Kevin Jhangiani？

來源

2015-11-16 Marcelo Borges

是的，'Ember。$'應該在兩種情況下都有效。如果元素不是孩子，'this。$'不應該工作。 –

Ember.$('#wrapper')將在頁面中使用包裝的ID查找元素。

this.$('#wrapper')將在組件中使用包裝的id找到一個元素。

如果您定義的組件有可能在頁面中不止一次出現，那麼您應該既不使用。編輯適當的模板，以便wrapper是一個類，而不是一個id。然後使用：

this.$('.wrapper')

來源

2015-11-16 19:25:46 Gaurav

既然你基本上只需切換的一類，這樣做是有你的wrapper有條件類和你的組件切換屬性的更多的「餘燼」的方式：

從'餘燼'導入Ember;

export default Ember.Component.extend({ 
tagName: 'a', 
classToggle: false, 

click: function() { 
    this.toggleProperty('classToggle'); 
} 
});

然後，你的DOM元素，你可以有一個條件類：

<div id="wrapper" class="{{if toggleClass "toggled"}}">...</div>

，或者，如果您使用的是舊版本的餘燼：

<div id="wrapper" {{bind-attr class="toggleClass:toggled"}}>...</div>

這是一個有點因爲您的組件不依賴於DOM元素（如果您想重複使用此組件，可能會變得麻煩），因此更具可重用性。

來源

2015-11-16 22:33:48 sbatson5

謝謝@ sbatson5，你的回答對我來說效果不錯！ –

區別在於jquery選擇器的上下文。

Ember.$()

作用於整個文檔，即，您可以訪問頁面上的任何元素。

相反，

this.$()

的作用範圍是電流分量或視圖，並且因此可以是僅訪問DOM元素的孩子。

通常，您應該使用this.$，因爲它會更高性能（因爲搜索空間只是子元素）。 Ember.$應該保留在絕對需要訪問當前上下文之外的元素的時候。

來源

2015-11-16 22:51:49

在Ember中通過ID獲取元素

回答

相關問題