2012-12-06 3 views
3

모바일 프레임 워크를 탐색 중이며 Ember.js를 방문했습니다. MVC 모델을 좋아하지만 시각적 요소가 일반적으로 어떻게 처리되는지 궁금합니다. 예를 들어, jQuery Mobile을 사용하면 모바일에 최적화 된 양식 요소 (버튼, 슬라이더, 토글 스위치 등)를 쉽게 만들 수 있습니다. 페이지 전환도 처리 할 수 ​​있습니다. 이러한 유형의 시각적 요소는 Ember.js의 범위를 벗어나는 것 같습니다.Ember.js로 시각적 요소 처리하기

대부분의 사람들은 시각적 요소를 처리하는 다른 프레임 워크 (예 : jQuery Mobile)와 함께 Ember.js를 사용합니까?

답변

1

Ember는 jQuery를 내부적으로 사용하며 jQueryUI 위젯과 잘 작동하는 경향이 있습니다. 사람들이 겪게되는 주된 문제는 ember가 뷰를 렌더링하는 방법과 jQueryUI 위젯이 이벤트 핸들러를 잃는 (일반적으로 해결하기 쉬운) 동적 인 특성입니다.

Ember 뷰 레이어를 사용하는 슬라이더와 같은 사용자 지정보기를 만들고 이상적인 외부 위젯을 래핑 할 수있는 것이 가장 이상적입니다.

https://github.com/flamejs/flame.js

FlameJS은 또한 당신에 대해 물어 무엇을 많이 제공하는 흥미로운 프로젝트입니다.

+0

당신은에 조금 정교한 수 있습니다 "엠버는 (해결하기 위해 일반적으로 쉽게)보기와 이벤트 핸들러를 잃고 jQueryUI 위젯을 렌더링하는 방법을." 감사, – GeorgeW

+0

런타임에보기가 dom에 렌더링되지 않으므로 스크립트 중에 언제든지 위젯을 설정할 수 없습니다. 가장 좋은 일은 didInsertElement 또는 afterRender 콜백 뷰의 초기 위젯입니다. –

1

Ember.View 클래스에서 상속 된 didInsertElement 함수를 사용하여 jQuery 기반 플러그인 및 프레임 워크를 Ember와 쉽게 통합 할 수 있습니다. 간단한 예는 날짜 선택하게 될 것이다 :.이 예에서

App.DatePicker = Em.TextField.extend({ 
    didInsertElement: function() { 
     this.$().datepicker(); 
    } 
}); 

이를 $()가 $ (this.element)에 엠버 속기이고 텍스트 입력을 삽입 한 후 날짜 선택을 작성 돔에. Ember의 내장 옵저버 및 속성 바인딩을 사용하여 변경 사항을 처리 할 수 ​​있습니다.

jQueryMobile은 Ember가 라우팅 및 링크를 제어 할 수 있도록 특별히 구성해야합니다. 좋은 샘플은 https://github.com/LuisSala/emberjs-jqm입니다.

0

bootstrap.js를 확인 했습니까? 모든 스타일은 화면에 표시되는 크기에 상관없이 자동으로 크기가 조정되며 핸들 막대 템플릿에 통합 할 특별한 것은 필요하지 않으며 적절한 클래스를 추가하기 만하면 나머지는 기본적으로 처리됩니다.

http://twitter.github.com/bootstrap/

관련 문제