[ember.js] Ember.js 애플리케이션을 설계하는 방법

Mike Grassotti의 최소 실행 가능한 Ember.js 빠른 시작 가이드

이 빠른 시작 가이드는 몇 분 안에 0 에서 0보다 약간 높은 수준으로 안내합니다 . 완료되면 ember.js가 실제로 작동하고 더 많은 것을 배울 수있을만큼 충분히 관심을 가질 것이라는 확신을 갖게 될 것입니다.

경고 :이 가이드를 시도하지 말고 불씨가 “이 빠른 시작 가이드를 jQuery 또는 Fortran에서 더 잘 작성할 수 있습니다.”라고 생각하지 마십시오. 나는 당신을 불씨 나 다른 것에 팔려고하는 것이 아닙니다.이 가이드는 단지 hello-world에 불과합니다.

0 단계-jsFiddle 확인

이 jsFiddle 에는이 답변의 모든 코드가 있습니다.

1 단계-ember.js 및 기타 필수 라이브러리 포함

Ember.js에는 jQuery와 핸들 바가 모두 필요합니다. 해당 라이브러리가 ember.js 전에로드되었는지 확인하십시오.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>

2 단계-하나 이상의 핸들 바 템플릿을 사용하여 애플리케이션의 사용자 인터페이스 설명

기본적으로 ember는 하나 이상의 handlbars 템플릿의 콘텐츠를 사용하여 HTML 페이지의 본문을 대체합니다. 언젠가 이러한 템플릿은 스프로킷 또는 grunt.js로 조립 된 별도의 .hbs 파일에있을 것입니다. 지금은 모든 것을 하나의 파일에 보관하고 스크립트 태그를 사용합니다.

먼저 단일 application템플릿을 추가해 보겠습니다 .

<script type="text/x-handlebars" data-template-name="application">
  <div class="container">
    <h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
    <p>{{message}}</p>
  </div>
</script>

3 단계-엠버 애플리케이션 초기화

App = Ember.Application.create({});ember.js를로드하고 애플리케이션을 초기화하려면 다른 스크립트 블록을 추가 하기 만하면됩니다.

<script type='text/javascript'>
  App = Ember.Application.create({});
</script>

이것이 기본적인 불씨 응용 프로그램을 만드는 데 필요한 전부이지만 그다지 흥미롭지는 않습니다.

4 단계 : 컨트롤러 추가

Ember는 컨트롤러의 컨텍스트에서 각 핸들 바 템플릿을 평가합니다. 따라서 application템플릿에는 일치하는 ApplicationController. Ember 생성은 사용자가 정의하지 않으면 자동으로 생성되지만 여기에서는 메시지 속성을 추가하도록 사용자 정의 해 보겠습니다.

<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
    message: 'This is the application template'
});
</script>

5 단계 : 경로 및 추가 컨트롤러 및 템플릿 정의

Ember 라우터를 사용하면 템플릿 / 컨트롤러를 애플리케이션에 쉽게 결합 할 수 있습니다.

<script type='text/javascript'>
  App.Router.map(function() {
    this.route("index", { path: "/" });
    this.route("list", { path: "/list" });
  });

  App.IndexController = Ember.Controller.extend({
    message: 'Hello! See how index.hbs is evaluated in the context of IndexController'
  });

  App.ListRoute = Ember.Route.extend({
    setupController: function(controller) {
      controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
    }
  });

</script>

이 작업을 수행하기 위해 {{outlet}}도우미 를 추가하여 응용 프로그램 템플릿을 수정합니다 . Ember 라우터는 사용자의 경로에 따라 적절한 템플릿을 콘센트에 렌더링합니다. 또한 {{linkTo}}도우미를 사용하여 탐색 링크를 추가합니다.

    <script type="text/x-handlebars" data-template-name="application">
      <div class="container">
          <h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
        <p>{{message}}</p>
        <div class="row">
          {{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
          {{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
        </div>
        {{outlet}}
      </div>
    </script>

    <script type="text/x-handlebars" data-template-name="list">
      <h3 class="demo-panel-title">This is the list template</h3>
      <ul>
      {{#each item in content}}
          <li>{{item}}</li>
      {{/each}}
       </ul>
    </script>

    <script type="text/x-handlebars" data-template-name="index">
      <h3 class="demo-panel-title">This is the index template</h3>
      <p>{{message}}</p>
    </script>

끝난!

이 응용 프로그램의 작동 예는 여기에서 볼 수 있습니다 .

이 jsFiddle 을 자신의 엠버 앱의 시작점으로 사용할 수 있습니다.

다음 단계…

• Ember 가이드 읽기
• Peepcode 스크린 캐스트를 구매할 수도 있습니다.
• 여기 Stack Overflow 또는 ember IRC에서 질문하십시오.

참고로 내 원래 답변 :

---

내 질문은 Ember.js 전문가, 그리고 확실히 각 튜토리얼 작성자를위한 것입니다. 언제 한 튜토리얼의 디자인 패턴을 사용해야하고 다른 튜토리얼의 디자인 패턴을 언제 사용해야합니까?

이 두 자습서는 작성 당시의 모범 사례를 나타냅니다. 확실히 각각에서 배울 수있는 것이 있지만, 둘 다 ember.js가 매우 빠르게 움직이고 있기 때문에 슬프게도 구식이 될 운명입니다. 두 가지 중에서 Trek ‘s는 훨씬 더 최신입니다.

각각의 구성 요소는 개인 취향이며 내 앱이 성숙함에 따라 필수적인 구성 요소는 무엇입니까? 새로운 엠버 애플리케이션을 개발하는 경우 Code Lab 접근 방식을 따르지 않는 것이 좋습니다. 유용하기에는 너무 오래되었습니다.

Code Lab의 디자인에서 Ember는 (그의 사용자 정의 JS의 100 % 임에도 불구하고) 응용 프로그램 내에서 기존에 더 가까운 것처럼 보이지만 Trek의 응용 프로그램은 Ember 내에서 더 많이 살고있는 것 같습니다.

귀하의 의견은 뱅온입니다. CodeLab은 핵심 ember 구성 요소를 활용하고 전역 범위에서 액세스합니다. 그것이 작성되었을 때 (9 개월 전) 이것은 매우 일반적 이었지만 오늘날에는 불씨 응용 프로그램을 작성하는 모범 사례가 Trek이하는 일에 훨씬 더 가깝습니다.

즉, Trek의 튜토리얼도 구식이되고 있습니다. 필요 ApplicationView했고 ApplicationController이제 프레임 워크 자체에서 생성 된 구성 요소입니다 .

지금까지 가장 최근의 리소스는 http://emberjs.com/guides/에 게시 된 가이드 세트입니다.이 가이드
는 지난 몇 주 동안 처음부터 작성되었으며 ember의 최신 (출시 전) 버전을 반영합니다.

https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences 에서 trek의 wip 프로젝트도 확인합니다.

수정 :

@ sly7_7 : ember-data https://github.com/dgeb/ember_data_example을 사용하여 다른 예도 제공합니다.

---

답변