사용한 것 (환경)

cordova

visualStudioCode

windows10

Android

튜토리얼을 번역하면서 시도

튜토리얼의 페이지는 아래와 같다.

Module 8: Using Handlebars Templates

마지막 튜토리얼.

Cordova 튜토리얼을 시도해보십시오.

환경 구축에 대해서는 별도 정리하고 있으므로 아래 참조.

cordova&VSCode로 환경을 구축할 때까지의 우왕좌왕 메모.

Module 8: Using Handlebars Templates

Writing HTML fragments in JavaScript and programmatically inserting them into the DOM is tedious.
자바 스크립트에서 HTML 요소를 작성하고 DOM에 이러한 요소를 프로그래밍 방식으로 삽입하는 것은 길고 어색합니다.

It makes your application harder to write and harder to maintain.
응용 프로그램을 작성하는 것이 어려워지고 유지 보수가 어려워집니다.

HTML templates address this issue by decoupling the UI definition (HTML markup) from your code.
HTML 템플릿은 이 문제를 코드에서 UI 정의(HTML markup)를 분리하여 처리합니다.

There are a number of great HTML template solutions, including Mustache.js, Handlebars.js, and Underscore.js to name a few.
몇 가지 예를 들면 Mustache.js, Handlebars.js 및 Underscore.js와 같은 많은 훌륭한 HTML 템플릿 솔루션이 있습니다.

In this module, we create two templates to streamline the code of the Employee Directory application.
이 모듈에서는 Employee Directory 응용 프로그램의 코드를 간소화하기 위한 두 개의 템플릿을 만듭니다.

We use Handlebars.js but the same result can be achieved using the other HTML template solutions.
Handlebars.js를 사용하지만 다른 HTML 템플릿 솔루션을 사용해도 동일한 결과를 얻을 수 있습니다.

Handlebars.js에 대해서는 아래 페이지를 읽어두면 소스 코드를 작성할 때 무엇을 하는지 이해하기 쉽습니다.
자바 스크립트 템플릿 엔진 Handlebars 시작

Step 1: Define the templates
1단계 템플릿 정의

아래와 같이 index.html을 변경합니다.

1. handlebars.js를 포함하도록 script 태그를 추가합니다.

<script src="lib/handlebars.js"></script>

2. ratchet.css 및 styles.css를 index.html 헤더 태그 아래에 추가합니다.
ratchet.css는 모바일 애플리케이션을 위한 스타일을 제공하는 간단한 CSS 툴킷입니다.

<link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">

3. 홈 뷰를 렌더링하는 HTML 템플릿을 만듭니다.
이 스크립트 태그를 body 태그의 첫 번째 자식으로 추가합니다.
요컨대 이전 SPA 대응시에 app.js에 쓴 부분을 html측에 가져옵니다.

<script id="home-tpl" type="text/template">
    <header class="bar bar-nav">
        <h1 class="title">Directory</h1>
    </header>
    <div class="bar bar-standard bar-header-secondary">
        <input class='search-key' type="search"/>
    </div>
    <div class="content"></div>
</script>

4. 직원 목록을 렌더링하는 HTML 템플릿을 만듭니다.
이전 스크립트 태그 바로 다음에 이 스크립트 태그를 추가합니다.
내용을 보면, Local Functions 블록을 html측에 이식하고 있습니다. (쓰는 방법이 다릅니다만)

<script id="employee-list-tpl" type="text/template">
    <ul class="table-view">
        {{#each this}}
        <li class="table-view-cell media">
          <a href="#employees/{{ id }}">
              <img class="media-object pull-left" src="assets/pics/{{pic}}">
              <div class="media-body">
                  {{firstName}} {{lastName}}
                  <p>{{title}}</p>
              </div>
          </a>
        </li>
        {{/each}}
    </ul>
</script>

Step 2: Use the Templates
2단계 템플릿 사용

app.js의 immediate 함수를 다음과 같이 변경합니다.

1. 서비스 변수 선언 직전에 위에서 정의한 템플릿의 컴파일된 버전을 보유하는 두 개의 변수를 선언합니다.

var homeTpl = Handlebars.compile($("#home-tpl").html());
var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());

2. 인라인 HTML 대신 homeTpl 템플릿을 사용하도록 renderHomeView 함수를 변경합니다.

function renderHomeView() {
    $('body').html(homeTpl());
    $('.search-key').on('keyup', findByName);
}

3. 인라인 HTML 대신 employeeListTpl 템플릿을 사용하도록 findByName 함수를 수정합니다.

function findByName() {
    service.findByName($('.search-key').val()).done(function (employees) {
        $('.content').html(employeeListTpl(employees));
    });
}

4. 응용 프로그램을 테스트합니다.


모바일 같은 UI가 되었다!

3단계는 iOS 테스트 환경이 없기 때문에 통과합니다.

참고 URL

Module 8: Using Handlebars Templates

Cordova 튜토리얼을 시도해보십시오.

cordova&VSCode로 환경을 구축할 때까지의 우왕좌왕 메모.

자바 스크립트 템플릿 엔진 Handlebars 시작