Ember JS : 템플릿,보기 및 구성 요소

Question

템플릿,보기 및 구성 요소의 사용을 컨텍스트에 넣는 코드 스 니펫 (예 : jsfiddle, 예를 들어)이 있습니까? 하나를 사용할 때와 다른 하나를 사용할 때와 사용 방법에 대한 실용적인 데모를 원합니다. 특히 개념적으로 매우 가까운 것처럼 보이는보기와 구성 요소.

가이드는보다 복잡한 이벤트 처리가 필요할 때보기를 제안합니다.

특히 나는 더 나은 코드 재사용과 DRY 뷰 레이어 코드에 이러한 관용적 인 접근 방식을 사용하는 방법에 대해 자세히 배우는 데 관심이 있습니다. 특히 중첩 된 뷰 계층 구조 작성 및 이벤트 버블 링 관리 방법에 대해 궁금합니다.

Answer 1

나는 99 %의 시간 동안 템플릿이 모두 필요한 것으로 나타났습니다. 조회는 템플릿과 상호 작용하거나 재사용 할 UI가 필요한 경우입니다. 예를 들어 앱의 여러 위치에서 사용할 필요가있는 복잡한 사용자 상호 작용이있는 tree보기에 대한보기 구성 요소를 만들었습니다. 또한보기에서 브라우저 스크롤 동작을보기의 메서드에 바인딩하는 템플릿의 데이터로 '무한'scrolling을 처리하기 위해 뷰를 사용했습니다. 보기

App.CompoundPathwaysIndexView = Ember.View.extend({ 
    didInsertElement: function() { 
    var view = this; 
    $(window).bind("scroll", function() { 
     view.didScroll(); 
    }); 
    }, 

    willDestroyElement: function() { 
    $(window).unbind("scroll"); 
    }, 

    didScroll: function() { 
    if(this.isScrolledToBottom() && !this.get('controller').get('fetching')) { 
     this.get('controller').set('fetching', true); 
     this.get('controller').send('fetchMore'); 
    } 
    }, 

    isScrolledToBottom: function() { 
    var documentHeight = $(document).height(); 
    var windowHeight = $(window).height(); 
    var top = $(document).scrollTop(); 
    var scrollPercent = (top/(documentHeight-windowHeight)) * 100; 

    return scrollPercent > 99; 
    } 
}); 

다른 예는 템플릿에 inject 스크립트 태그에있는 그것이 didInsertElement 방법을 사용하여 렌더링 한 후 : 웹 페이지를 아래로 스크롤 할 때 다음 더 많은 결과를 가져올 수있는 컨트롤러의 메소드를 트리거 (핸들 바 템플릿에 이것을 추가하는 것은 나쁜 습관이기 때문에).

템플릿 :

{{input type="text" placeholder="search" value=search action="query" id="search_box" class="search-query span4"}} 

뷰 : 엠버의 구성 요소 대 [조회수의

App.ApplicationView = Ember.View.extend({ 
    didInsertElement: function() { 
     $('#search_box').typeahead({ 
     source: function (query, process) { 
      $.getJSON(typeaheadUrl, { query: query }, function (data) { 
       return process(data); 
      }) 
     } 
     }); 
    } 
});