ember.js보기 렌더링이 다른 점

Question

// create Ember js app 
App = Ember.Application.create(); 

// Create a grand parent view - without using templateName function/property 
App.GrandparentView = Ember.View.extend({ 
    click: function() { 
    console.log('Grandparent!'); 
    } 
}); 

// Create a parent view by using templateName function/property 
App.ParentView = Ember.View.extend({ 
    templateName:"parent-view",   
    click: function() { 
    console.log('parent view!'); 
    } 
}); 

// use the template to render the view content 
<script type="text/x-handlebars" > 
    {{#view App.GrandparentView}} 
    Click Grandparent View!  
    {{/view}} 
</script> 

// embed the view inside a div 
<div id="Parent"> 
    <script type="text/x-handlebars"> 
    {{view App.ParentView}} 
    </script> 
</div> 

ember.js의보기 렌더링 측면에서 이러한 두 가지 접근 방식은 어떻게 작동합니까? 어떤 것이 더 낫고 어떤 것의 유스 케이스 나 장점이 무엇인가?

Answer 1

먼저 Ember 템플릿 <script> 태그를 <div> 태그 안에 넣지 마십시오. 그것은 당신이 기대하는 것을하지 않을 것입니다.

{{view App.View1}}을 사용하면 ember에 App.View1의 인스턴스를 렌더링하도록 지정합니다. 템플릿은 App.View를 빌드 할 때 사용한 templateName입니다. 예 :

<script type="text/x-handlebars" data-template-name="my-template"> 
    Hello World! 
<script> 

App.View1 = Ember.View.extend({ templateName: 'my-template' }); 

당신이 여기 App.View2의 인스턴스를 렌더링하는 엠버을 이야기하지만, 템플릿 인라인을 정의 {{#view App.View2}} {{/view}} 사용합니다. App.View2는 templateName 속성을 가지지 않으며, 그 템플릿은 {{#view}}{{/view}} 블록 안에 있습니다. 예 :

{{#view App.View2}} 
    Hello World 
{{/view}} 

App.View2 = Ember.View.extend(); 

명명 된 템플릿은 재사용이 가능하고 코드를 좀 더 깨끗하게 만듭니다. 잘 구조화 된 앱은 두 가지 템플릿 옵션을 모두 활용합니다. 익명/인라인 템플릿 (App.View2 예제)은 같은 템플릿에 한 번만 다른 템플릿을 제공하려는 경우에 사용할 수 있습니다.