모든 하위보기를 표시 할 수있는 EmberJS보기를 만드는 데 가장 적합한 관용구는 무엇입니까? 아니면 하나만 표시 할 수 있습니까?

Question

각 App.Page를 렌더링하기 위해 App.Page, App.Page의 ArrayController 및 App.PageView라는 모델이 있다고 가정 해보십시오. 내가 가장 App.MyPagesView을 구현하는 방법을 알아 내려고 노력하고있어

이 그래서과 같이 작동합니다

• 경우 App.showAllPages 사실이다 : 나는 MyPagesView이 앱 포함시킬 AppPage에서 각 App.Page를 표시하기위한 .PageView (s)
• Else : MyPagesView는 App.pages.currentPage에 바인딩 된 하나의 App.PageView 만 표시하려고합니다.

  // MyPagesViewApproach1 
  {{#unless App.showAllPages}} 
      {{view App.PageView pageBinding="pages.currentPage"}} 
  {{else}} 
      {{#each pages}} 
       {{view App.PageView pageBinding="this"}} 
      {{/each}} 
  {{/unless}} 
  

  을하지만, 기존 모델 사용자가 showAllPages에 토글 때마다 새로운 전망을이 만들어지지 않습니다 : 나에게 발생

가장 간단한 구현과 같이 템플릿을 사용 꺼져? 또한이 템플리트를 사용하려고하면 성능 문제에 대한 emberJS 경고가 표시됩니다.

페이지 뷰 (PageView)는 렌더링하기가 복잡하고 비용이 많이 듭니다. 각 페이지에 대해 한 번 PageView를 만들고, 사용하지 않을 때는 관련성이없는 PageViews를 DOM에서 제거/숨기기 만합니다.

App = Ember.Application.create({ 
    showAllPages: false, 
    pages: Ember.ArrayController.create({ 
     content: [] 
     currentPage: null 
    }), 
    ready: function() { 
     this.pages.pushObject(App.Page.create({title: 'Page One'}); 
     this.pages.pushObject(App.Page.create({title: 'Some Other Page'}); 
     this.pages.pushObject(App.Page.create({title: 'Grrreatest Page Evar'}); 
     this.pagesController.set('currentPage', 
      this.pagesController.get('firstObject')); 
    } 
}); 
App.Page = Ember.Object.extend({ 
    title: null 
    // etc, etc... 
}); 
App.PageView = Ember.View.extend({ 
    templateName: 'page', 
    page: null // should be bound to an App.Page 
}); 

App.MyPagesView_Approach1 = Ember.View.extend({ 
    pagesBinding: 'Elicitation.pages' 
    // ??? 
}); 
App.MyPagesView_Approach2 = Ember.ContainerView.extend({ 
    // ??? 
}); 

그리고 내 HTML :

<script type="text/x-handlebars" data-template-name="page"> 
    The title of this page is {{ page.title }} 
</script> 

{{view App.MyPagesView }} 

가 다시 정리해 보면, 그 때마다 모든 뷰를 다시 작성하지 않고 App.showAllPages에 응답 있도록 MyPagesView을 구현하기위한 적절한 EmberJS-Y 방법은 무엇 그 토글?

일종의 ContainerView일까요? 또는 질문의 상단에 표시되는 unless/else 템플릿을 사용해야합니까? 아니면 완전히 다른 무엇인가? 나는 EmberJS에 정말로 간단한 해결책이 존재한다고 느낀다.

Answer 1

"CurrentCollectionView"라는 재사용 가능한 View 클래스로 캡슐화 된 최고입니다. 나는 CollectionView를 사용하고 view.set ('isVisible')을 사용하여 적절한 하위 뷰를 숨기거나 표시합니다. 기본적으로 CollectionView와 같이 사용하지만, 컨텐츠의 한 요소 만 제외하고 currentContent를 설정하여 showAllContent를 사용하여 currentContent를 겹쳐 쓸 수 있습니다.

App.CurrentCollectionView = Ember.CollectionView.extend({ 
    showAllContent: false, 
    currentContent: null, 

    currentContentChanged: function() { 
     console.log("Elicitation.PagesView.currentContentChanged()"); 
     var showAllContent = this.get('showAllContent'); 

     if (Ember.none(showAllContent) || !showAllContent) { 
      var contents = this.get('content'); 
      var currentContent = this.get('currentContent'); 
      this.get('childViews').forEach(function (view, i) { 
       var isVisible = contents.objectAt(i) == currentContent; 
       view.set('isVisible', isVisible); 
      }); 
     } else { 
      this.get('childViews').forEach(function (view) { 
       view.set('isVisible', true); 
      }); 
     } 
    }.observes('currentContent', 'showAllContent', 'childViews') 
}); 

MyPagesView 구현하는 CurrentCollectionView를 사용하는 예 :

App.MyPagesView = App.CurrentCollectionView.extend({ 
    itemViewClass: App.PageView, 
    contentBinding: 'App.pages', 
    currentContentBinding: 'App.pages.currentPage', 
    showAllContentBinding: 'App.showAllPages', 
}); 

또는 템플릿으로 인라인을 사용하는 등이 :

{{view App.CurrentCollectionView itemViewClass="App.PageView" contentBinding="App.pages" currentContentBinding="App.pages.currentPage" showAllContentBinding="App.showAllPages"}} 

다른 희망의 ​​사람이 유용한 발견 및/또는 향상시킬 수 있습니다 그것에 (제발!)