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

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

---

Ember JS가 버전 1.0.0에 접근 (및 도달)함에 따라 진화하는 Ember JS를 따라 잡는 것은 어려웠습니다. 튜토리얼과 문서가 왔다가 사라지면서 모범 사례와 원래 개발자의 의도에 대해 많은 혼란을 겪었습니다.

제 질문은 정확히 다음과 같습니다. Ember JS의 모범 사례는 무엇입니까? Ember JS가 어떻게 사용되는지 보여주는 업데이트 된 튜토리얼이나 작업 샘플이 있습니까? 코드 샘플이 좋을 것입니다!

모든 분들, 특히 Ember JS 개발자에게 감사드립니다!

---

신규 Ember.js 개발자와 베테랑 Ember.js 개발자가 모두 활용해야하는 중요한 프로젝트가 있습니다.

Ember-CLI

명령 줄에 약간의 편안함이 필요하지만 커뮤니티에서 권장하는 모범 사례를 사용하여 몇 초 만에 최신 Ember 프로젝트를 생성 할 수 있습니다.

Mike Grassotti의 답변 에서처럼 Ember.js 프로젝트를 어려운 방식으로 설정하는 것이 유익하지만 프로덕션 코드에는 그렇게해서는 안됩니다. 특히 Ember-CLI예후 다가 승인 한 행복한 길 을 보여줄 수있는 강력하고 사용하기 쉬운 프로젝트가있을 때 특히 그렇습니다 .

---

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>

To make this work, we modify our the application template by adding an {{outlet}} helper. Ember router will render appropriate template into the outlet depending on user's route. We will also use the {{linkTo}} helper to add navigation links.

    <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>

Done!

A working example of this application is available here.

You can use this jsFiddle as a starting point for your own ember apps

Next Steps...

• Read the Ember Guides
• Maybe buy the Peepcode screencast
• Ask questions here on Stack Overflow or in ember IRC

For reference, my original answer:

---

My question is for any Ember.js expert, and certainly the respective tutorial authors: When should I use design patterns from one tutorial, and when from the other?

These two tutorials represent best practices at the time they were written. For sure there is something that can be learned from each, both are sadly doomed to become out of date because ember.js is moving very quickly. Of the two, Trek's is far more current.

What components of each are personal preferences, and what components will prove essential as my app matures? If you are developing a new ember application I would not recommend following the Code Lab approach. It is just too out-of-date to be useful.

In Code Lab's design, Ember seems to be closer to existing within the application (even though it is 100% of his custom JS), whereas Trek's application seems to live more within Ember.

Your comment is bang-on. CodeLab is making taking advantage of core ember components and accessing them from global scope. When it was written (9 months ago) this was pretty common but today best-practice for writing ember applications is much closer to what Trek was doing.

That said, even Trek's tutorial is becoming out-of-date. Components that were required ApplicationView and ApplicationController are now generated by the framework itself.

By far the most current resource is the set of guides published at http://emberjs.com/guides/ - they have been written from the ground up over the last few weeks and reflect the latest (pre-release) version of ember.

I'd also check out trek's wip project here: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

EDIT:

@sly7_7 : I'd also give an other example, using ember-data https://github.com/dgeb/ember_data_example

---

There is 30 minutes fresh screencast made by @tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY

---

I would highly recommend using Yeoman and its accompanying ember generator. Out of the box you get all the tools you need to develop, test and prepare an app for production. As an added bonus, you'll be able to split your view templates into multiple files and start with an intelligent directory structure that will facilitate you in creating a maintainable codebase.

I've written a tutorial on getting it up and running in about 5 minutes. Just install node.js and follow along here

---

The Fire Up Ember - Peepcode screencast is worth a watch.

---

Also go through this free tutorial titled Let’s Learn Ember from Tuts+ Premium. Its free because its from their free courses series. This course, as the Tuts guys call it, is divided into fourteen easy to follow chapters.

I hope this helps.

Regards,

---

I prefer the charcoal yeoman approach. It gives you a ton of stuff out of the box including:

• a nice folder architecture using a 'module' approach.
• neuter
• live reload
• minify
• uglify
• jshint

and more.

and its super easy to setup, just run yo charcoal to create an app then yo charcoal:module myModule to add a new module.

more info here: https://github.com/thomasboyt/charcoal

---

I've just created a Starter Kit, if you would like to use the latest EmberJS with Ember-Data, with Emblem template engine. All wrapped in Middleman, so you can develop with CoffeeScript. Everything on my GitHub: http://goo.gl/a7kz6y

---

Although outdated Flame on Ember.js is still a good tutorial for someone looking at ember for the first time.

---

I've started building a series of videos that start from before Ember and build towards using Ember in anger in serious use-cases for real-world things.

If you're interested in seeing this hit the light of day (I'm more than happy to eventually put it public if there's interest) you should definitely go over to the post I made and hit "like" (or just comment here, I guess):

http://discuss.emberjs.com/t/making-ember-easier-to-approach-aka-crazy-screencasts-videos-that-will-stick-in-your-mind-for-learning-ember/5284

I'm super keen to make it to help the community flourish, but also to help people learn how to build standard web sites in an easy way.

참고URL : https://stackoverflow.com/questions/14204674/how-to-architect-an-ember-js-application