[javascript] Marionette.js에서 사용되는 템플릿(Template)의 종류와 기능은 무엇인가?

29 Nov 2023

javascript

Underscore 템플릿: Marionette.js는 기본적으로 Underscore 템플릿 엔진을 사용합니다. Underscore 템플릿은 간단하고 가벼우며, JavaScript 코드와 HTML을 조합하여 동적으로 템플릿을 생성할 수 있습니다.

var template = _.template("<p>Hello, <%= name %>!</p>");
var html = template({ name: "John" }); // "<p>Hello, John!</p>"

Handlebars 템플릿: Marionette.js는 Handlebars 템플릿 엔진도 지원합니다. Handlebars는 Underscore 템플릿보다 좀 더 강력하며, 조건문, 반복문 등의 제어문을 사용할 수 있습니다.

var template = Handlebars.compile("<p>{{#if isLoggedIn}}Welcome back, {{name}}!{{else}}Please log in.{{/if}}</p>");
var context = { name: "John", isLoggedIn: true };
var html = template(context); // "<p>Welcome back, John!</p>"

콜렉션 렌더링 템플릿: Marionette.js에서는 콜렉션을 렌더링하기 위한 기본 템플릿도 제공합니다. 이를 사용하면 콜렉션 내의 각 모델을 특정한 템플릿으로 렌더링할 수 있습니다.

var ItemView = Marionette.View.extend({
  template: _.template("<li><%= name %></li>")
});

var CollectionView = Marionette.CollectionView.extend({
  childView: ItemView
});

var collection = new Backbone.Collection([{ name: "Apple" }, { name: "Banana" }]);
var collectionView = new CollectionView({ collection: collection });
collectionView.render(); // "<ul><li>Apple</li><li>Banana</li></ul>"

Marionette.js는 다양한 유형의 템플릿을 지원하며, 개발자에게 유연성과 편의성을 제공합니다. 이를 통해 더욱 효율적이고 유지보수가 쉬운 JavaScript 애플리케이션 개발이 가능합니다.