Question

我想得到Ember生成的元素id。

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

呈现类似：

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

我需要获取控制器内每个div元素的id。如果我要使用自定义ID，那么如何使用ember视图创建自定义ID。

如何通过控制器内的id识别每个div元素？

Answer 1

我不确定你的意思，但我可以回答：

如何通过控制器内的id识别每个div元素？

Working Example查看console.log以查看元素ID，然后使用Google Chrome或Firebug检查组件元素以查看id是否相同。

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

组件内部的

this是组件，elementId获取div的id（如果在组件内使用tagName，则获取不同的标记）。

如果要使用JQuery选择组件，请在组件内使用：this.$()。

现在我不知道你需要什么，所以我会抛出一些建议。如果您需要知道控制器中每个组件的ID，我建议将控制器中的数组传递给组件。在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的操作发送组件的id或this.sendAction('actionName', componentId)对象，并在控制器上定义一个带有一个参数的操作（即componentId或jQuery对象。

Answer 2

你也可以在插入html之前处理emberId。

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

Answer 3

您可以使用elementId property创建组件的自定义ID。

您可以通过将其绑定到组件模板来创建id，如此

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

或在组件文件

中

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

如何让Emberjs在控制器中生成元素id

3 个答案: