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