Как получить идентификатор сгенерированного элемента Emberjs в контроллере

Question

Я хотел бы получить идентификатор элемента Ember.

{{#each}} 
<div> 
<h1>{{MyComponent}}</h1> 
</div> 
{{/each}} 

, которые делают что-то вроде:

<div id="ember180" class="ember-view"> 
<h1>My Component here</h1> 
</div> 

Мне нужно получить идентификатор каждого элемента сНа внутри контроллера. Если я должен использовать пользовательский идентификатор, то как я могу создать собственный идентификатор, используя представление ember.

И как я могу идентифицировать каждый элемент div по его внутреннему контроллеру?

Answer 1

Я не уверен, что именно вы имеете в виду, но я могу ответить:

И как я могу идентифицировать каждый элемент Div его идентификатором внутри контроллера?

Working Example Посмотрите на console.log, чтобы увидеть идентификатор элемента, а затем использовать Google Chrome или Firebug для проверки элементов компоненты, чтобы увидеть, что идентификатор совпадает.

App.ItemOneComponent = Ember.Component.extend({ 
    didInsertElement: function(){ 
    console.log('element id: ' + this.elementId); 
    } 
}); 

this внутри компонента является компонентом, и elementId получает id в DIV (или иной тег, если вы используете tagName внутри компонента).

Если вы хотите выбрать компонент с помощью JQuery, используйте: this.$() внутри компонента.

Теперь я не знаю, что вам нужно, поэтому я собираюсь выкинуть несколько предложений. Если вам нужно знать идентификаторы каждого компонента из контроллера, я бы рекомендовал передать в массив, сидящий на контроллере, компоненту. В вашем didInsertElement добавьте объект elementId или объект jQuery к массиву. Here is what I mean

App.IndexController = Ember.ArrayController.extend({ 
    componentIds: [] 
}); 

App.ItemOneComponent = Ember.Component.extend({ 
    didInsertElement: function(){ 
    this.get('array').pushObject(this.elementId); 
    } 
}); 

И ваш компонент передает недвижимость в: {{item-one array=controller.componentIds}}

Вы также можете отправить идентификатор компонента или jQuery объекта с помощью действия с this.sendAction('actionName', componentId) и есть действие, определенное на контроллере, который принимает один параметр (т.е. ComponentID или объект JQuery.

Answer 2

Вы также можете иметь дело с emberId прежде чем он будет вставлен в HTML.

App.ItemOneComponent = Ember.Component.extend({ 
    willInsertElement: function(){ 
     var emberId = this.get('elementId'); 
    } 
}); 

Answer 3

Вы можете создать собственный идентификатор для своего компонента, используя elementId property.

Вы можете создать идентификатор, связывая его с шаблона компонента, как так

{{my-component elementId="your-id-name"}} 

или в файле компонента

export default Ember.Component.extend({ 
    elementId: 'your-id-name' 
});