emberJSのHTML要素の属性をafterModelまたは類似のメソッドから変更する方法

Question

私のアプリケーションにルートと対応するテンプレートがあります。ページの読み込み自体で、URLパラメータに基づいて要素を隠すことはしません。私はjQuery $.("elementName").hide();とそれ以外の組み合わせを使用してafterModelメソッドでこれを実行しようとしました。しかし、DOMはまだ利用できないと思われるので、何も機能しません。アクションセクションのボタンアクションと同じことが達成できますが、ページロード時にそれをやってみたいと思っています。誰かが私が間違っていることを指摘できますか？

Answer 1

これを行うための正しい方法は、燃えさしを使用することです

q: '', 
colors: [], 
hasSearch: Ember.computed.notEmpty('q'), 
hasColors: Ember.computed.notEmpty('colors') 

テンプレート/ index.hbsハンドルバー{{#if}}ヘルパー。あなたはqueryParamsそのかなり簡単と組み合わせる場合：

をお使いのコントローラは次のようになります。

export default Ember.Controller.extend({ 
    queryParams: ['showSomething'], 
}); 

そして、このようなあなたのテンプレート：

<h1>Hello</h1> 
{{#if showSomething}} 
    <div id="something">something</div> 
{{/if}} 

---

あなたが本当にしたい場合に手動でDOMを操作するには、didInsertElementフックでこれを行うことができます。あなたが唯一のコンポーネントでこのを持っているしかし：

のでmy-component.hbsは次のようになります。

<div id="{{concat elementId "something"}}>something</div> 

とあなたのmy-component.js

export default Ember.Component.extend({ 
    didInsertElement() { 
    this._super(); 
    if(false) { 
     $(`#${this.get('elementId')}something`).hide(); 
    } 
    } 
}); 

をしかし、私は強く反対をお勧めします！

Answer 2

URLパラメータqueryParamsはルートにありますか？そうであれば、コントローラのプロパティを設定して、それらの存在（または他の真実の条件）をチェックし、DOM表示のためにテンプレート内のプロパティを利用することができます。これらの値を子コンポーネントに送ることさえできます。

ルート/ index.js

queryParams: { 
    q: { 
    refreshModel: true 
    }, 
    colors: { 
    refreshModel: true 
    } 
} 

コントローラ/ index.js

{{#if hasSearch}} 
    <p>You are searching for {{q}}</p> 
{{/if}} 
// .. etc for colors