web-dev-qa-db-ja.com

コントローラでEmberjsが生成した要素IDを取得する方法

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 view）を使用してカスタムIDを作成するにはどうすればよいですか。

また、コントローラー内のIDで各div要素を識別するにはどうすればよいですか？

ember.jshandlebars.jselement
11
Hasib Mahmud

あなたが何を意味するのか正確にはわかりませんが、私は答えることができます：

また、コントローラー内のIDで各div要素を識別するにはどうすればよいですか？

実例 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オブジェクトを配列に追加します。 これが私の意味です

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

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

そして、コンポーネントは次のプロパティを渡します：_{{item-one array=controller.componentIds}}_

this.sendAction('actionName', componentId)を使用したアクションを介してコンポーネントのIDまたはjQueryオブジェクトを送信し、1つのパラメーター（つまり、componentIdまたはjQueryオブジェクト）を受け取るアクションをコントローラーで定義することもできます。

17
mistahenry

EmberIdをhtmlに挿入する前に処理することもできます。

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

elementIdプロパティ を使用して、コンポーネントのカスタムIDを作成できます。

次のようにコンポーネントテンプレートにバインドしてIDを作成できます。

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

またはコンポーネントファイル内

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