EmberJS 템플릿

작성자: Xinyang Qiu

EmberJS MVC 템플릿은 네이선 토튼, 티아고 산토스, 신양 치우가 작성했습니다.

EmberJS MVC 템플릿 다운로드

EmberJS SPA 템플릿은 EmberJS를 사용하여 대화형 클라이언트 쪽 웹앱을 빠르게 빌드할 수 있도록 설계되었습니다.

"SPA(단일 페이지 애플리케이션)"는 단일 HTML 페이지를 로드한 다음 새 페이지를 로드하는 대신 동적으로 페이지를 업데이트하는 웹 애플리케이션의 일반적인 용어입니다. 초기 페이지 로드 후 SPA는 AJAX 요청을 통해 서버와 협상합니다.

AJAX는 새로운 것은 아니지만 오늘날에는 정교한 대규모 SPA 애플리케이션을 더 쉽게 빌드하고 유지 관리할 수 있는 JavaScript 프레임워크가 있습니다. 또한 HTML 5 및 CSS3을 사용하면 풍부한 UI를 더 쉽게 만들 수 있습니다.

EmberJS SPA 템플릿은 Ember JavaScript 라이브러리를 사용하여 AJAX 요청의 페이지 업데이트를 처리합니다. Ember.js 데이터 바인딩을 사용하여 페이지를 최신 데이터와 동기화합니다. 이렇게 하면 JSON 데이터를 안내하고 DOM을 업데이트하는 코드를 작성할 필요가 없습니다. 대신 데이터를 표시하는 방법을 Ember.js 알려주는 선언적 특성을 HTML에 넣습니다.

서버 쪽에서 EmberJS 템플릿은 KnockoutJS SPA 템플릿과 거의 동일합니다. ASP.NET MVC를 사용하여 HTML 문서를 제공하고 ASP.NET Web API 클라이언트의 AJAX 요청을 처리합니다. 템플릿의 이러한 측면에 대한 자세한 내용은 KnockoutJS 템플릿 설명서를 참조하세요. 이 항목에서는 Knockout 템플릿과 EmberJS 템플릿 간의 차이점에 중점을 둡니다.

EmberJS SPA 템플릿 프로젝트 만들기

위의 다운로드 단추를 클릭하여 템플릿을 다운로드하고 설치합니다. Visual Studio를 다시 시작해야 할 수 있습니다.

템플릿 창에서 설치된 템플릿을 선택하고 Visual C# 노드를 확장합니다. Visual C#에서 웹을 선택합니다. 프로젝트 템플릿 목록에서 MVC 4 웹 애플리케이션 ASP.NET 선택합니다. 프로젝트 이름을 지정하고 확인을 클릭합니다.

새 프로젝트 마법사에서 SPA 프로젝트Ember.js 선택합니다.

EmberJS SPA 템플릿 개요

EmberJS 템플릿은 jQuery, Ember.js Handlebars.js 조합을 사용하여 원활하고 대화형 UI를 만듭니다.

Ember.js 클라이언트 쪽 MVC 패턴을 사용하는 JavaScript 라이브러리입니다.

• 핸들바 템플릿 언어로 작성된 템플릿은 애플리케이션 사용자 인터페이스를 설명합니다. 릴리스 모드에서 Handlebars 컴파일러는 핸들바 템플릿을 번들로 묶고 컴파일하는 데 사용됩니다.
• 모델은 서버에서 가져오는 애플리케이션 데이터를 저장합니다(ToDo 목록 및 ToDo 항목).
• 컨트롤러는 애플리케이션 상태를 저장합니다. 컨트롤러는 종종 해당 템플릿에 모델 데이터를 제공합니다.
• 뷰는 애플리케이션에서 기본 이벤트를 변환하고 컨트롤러에 전달합니다.
• 라우터는 애플리케이션 상태를 관리하여 URL 및 템플릿을 동기화된 상태로 유지합니다.

또한 Ember 데이터 라이브러리를 사용하여 JSON 개체(RESTful API를 통해 서버에서 가져온) 및 클라이언트 모델을 동기화할 수 있습니다.

EmberJS SPA 템플릿은 스크립트를 8개 계층으로 구성합니다.

• webapi_adapter.js webapi_serializer.js: ember 데이터 라이브러리를 확장하여 ASP.NET Web API 작동합니다.
• 스크립트/helpers.js: 새 Ember 핸들바 도우미를 정의합니다.
• 스크립트/app.js: 앱을 만들고 어댑터와 serializer를 구성합니다.
• Scripts/app/models/*.js: 모델을 정의합니다.
• Scripts/app/views/*.js: 뷰를 정의합니다.
• 스크립트/앱/컨트롤러/*.js: 컨트롤러를 정의합니다.
• 스크립트/앱/경로, 스크립트/앱/router.js: 경로를 정의합니다.
• Templates/*.hbs: 핸들바 템플릿을 정의합니다.

이러한 스크립트 중 일부를 좀 더 자세히 살펴보겠습니다.

모델

모델은 Scripts/app/models 폴더에 정의되어 있습니다. todoItem.js 및 todoList.js 두 가지 모델 파일이 있습니다.

todo.model.js 할 일 목록에 대한 클라이언트 쪽(브라우저) 모델을 정의합니다. todoItem 및 todoList의 두 가지 모델 클래스가 있습니다. Ember에서 모델은 DS의 하위 클래스입니다. 모델. 모델에는 특성이 있는 속성이 있을 수 있습니다.

todoItemId: attr('number'), 
title: attr('string')

모델은 다른 모델과의 관계를 정의할 수 있습니다.

todoList: DS.belongsTo('App.TodoList'),

모델에는 다른 속성에 바인딩하는 계산 속성이 있을 수 있습니다.

hasError: function () {
    var currentError = this.get("error");
    return !(currentError === '' || currentError === null);
}.property('error'),

모델에는 관찰된 속성이 변경될 때 호출되는 관찰자 함수가 있을 수 있습니다.

saveCheckbox: function () {
    if(this.get("isDirty")){
        if (this.get("todoItemId")) {
            App.store.commit();
        }
    }
}.observes('isDone'),

보기

뷰는 Scripts/app/views 폴더에 정의되어 있습니다. 보기는 애플리케이션 UI에서 이벤트를 변환합니다. 이벤트 처리기는 컨트롤러 함수를 다시 호출하거나 데이터 컨텍스트를 직접 호출할 수 있습니다.

예를 들어 다음 코드는 views/TodoItemEditView.js. 입력 텍스트 필드에 대한 이벤트 처리를 정의합니다.

App.TodoItemEditView = Em.TextField.extend({
    lastValue: '',
    focusIn: function (evt) {
        this.lastValue = this.get('parentView').templateData.view.content.get("title");
    },
    focusOut: function (evt) {
        this.changeContent();
    },

    insertNewline: function (evt) {
        $(evt.target).blur();
    },

    changeContent: function () {
        var todoItem = this.get('parentView').templateData.view.content;
        var newValue = todoItem.get("title");
        if (this.lastValue != newValue) {
            App.store.commit();
            this.lastValue = newValue;
        }
    }
});

컨트롤러

컨트롤러는 Scripts/app/controllers 폴더에 정의됩니다. 단일 모델을 나타내려면 를 확장 Ember.ObjectController합니다.

App.TodoItemController = Ember.ObjectController.extend({
});

컨트롤러는 를 확장하여 모델 컬렉션을 나타낼 수도 있습니다 Ember.ArrayController. 예를 들어 TodoListController는 개체의 todoList 배열을 나타냅니다. 컨트롤러는 todoList ID를 기준으로 내림차순으로 정렬합니다.

App.TodoListController = Ember.ArrayController.extend({
    error: "",
    sortProperties: ['todoListId'],
    sortAscending: true,

    // ...

컨트롤러는 라는 addTodoList함수를 정의합니다. 이 함수는 새 todoList를 만들고 배열에 추가합니다. 이 함수가 호출되는 방법을 확인하려면 Templates 폴더에서 todoListTemplate.html 템플릿 파일을 엽니다. 다음 템플릿 코드는 함수에 단추를 addTodoList 바인딩합니다.

<input type="button" {{action "addTodoList"}} class="isActive" value="Add Todo list"></input>

컨트롤러에는 오류 메시지를 포함하는 속성도 포함되어 error 있습니다. 다음은 오류 메시지를 표시하는 템플릿 코드입니다(todoListTemplate.html).

<p class="error">{{error}}</p>

경로

Router.js 표시할 경로 및 기본 템플릿을 정의하고, 애플리케이션 상태를 설정하고, URL을 경로와 일치합니다.

App.Router.map(function () {
    this.route("index", { path: "/" });
    this.route("about");
    this.route("todoList", { path: "/todo" });
});

TodoListRoute.js setupController 함수를 재정의하여 TodoListRoute에 대한 데이터를 로드합니다.

App.TodoListRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        controller.set('content', App.TodoList.find());
    }
});

Ember는 명명 규칙을 사용하여 URL, 경로 이름, 컨트롤러 및 템플릿을 일치합니다. 자세한 내용은 EmberJS 설명서를 참조 http://emberjs.com/guides/routing/defining-your-routes/ 하세요.

템플릿

Templates 폴더에는 다음 네 가지 템플릿이 포함되어 있습니다.

• application.hbs: 애플리케이션이 시작될 때 렌더링되는 기본 템플릿입니다.
• about.hbs: "/about" 경로에 대한 템플릿입니다.
• index.hbs: 루트 "/" 경로에 대한 템플릿입니다.
• todoList.hbs: "/todo" 경로에 대한 템플릿입니다.
• _navbar.hbs: 템플릿은 탐색 메뉴를 정의합니다.

애플리케이션 템플릿은 master 페이지처럼 작동합니다. 경로에 따라 다른 템플릿을 삽입할 머리글, 바닥글 및 "{{outlet}}"가 포함되어 있습니다. Ember의 애플리케이션 템플릿에 대한 자세한 내용은 을 참조하세요 http://guides.emberjs.com/v1.10.0/templates/the-application-template//.

"/todoList" 템플릿에는 두 개의 루프 식이 포함되어 있습니다. 외부 루프는 이 {{#each controller}}고 내부 루프는 입니다 {{#each todos}}. 다음 코드는 기본 제공 Ember.Checkbox 보기, 사용자 지정된 App.TodoItemEditView및 작업이 있는 deleteTodo 링크를 보여줍니다.

{{view Ember.Checkbox checkedBinding="isDone"}}

{{view App.TodoItemEditView valueBinding="title" class="required" disabledBinding="isDone"}}

<a href="#" {{action "deleteTodo" on="click" target="view"}}>X</a>

Controllers/HtmlHelperExtensions.cs에 정의된 클래스는 HtmlHelperExtensions디버그 가 Web.config 파일에서 true 로 설정된 경우 템플릿 파일을 캐시하고 삽입하는 도우미 함수를 정의합니다. 이 함수는 Views/Home/App.cshtml에 정의된 ASP.NET MVC 뷰 파일에서 호출됩니다.

@if (HttpContext.Current.IsDebuggingEnabled)
{
    @Html.RenderEmber()
}
else
{
    @Scripts.Render("~/bundles/templates")
}

인수 없이 호출된 함수는 Templates 폴더의 모든 템플릿 파일을 렌더링합니다. 하위 폴더 또는 특정 템플릿 파일을 지정할 수도 있습니다.

Web.config 디버그 가 false 이면 애플리케이션에 번들 항목 "~/bundles/templates"가 포함됩니다. 이 번들 항목은 Handlebars 컴파일러 라이브러리를 사용하여 BundleConfig.cs에 추가됩니다.

if (!HttpContext.Current.IsDebuggingEnabled)
{
    bundles.Add(new Bundle("~/bundles/templates", 
        new EmberHandlebarsBundleTransform()).Include(
            "~/scripts/app/templates/*.hbs"
        ));
}