Nunjucks
You've been looking for a more sophisticated templating engine for JavaScript. Here it is. Rich Powerful language with block inheritance, autoescaping, macros, asynchronous control, and more. Heavily inspired by jinja2 Fast & Lean High-performant. Small 8K gzipped runtime with precompiled templates in the browser Extensible Crazy extensible with custom filters and extensions Everywhere Available i
『JavaScriptテンプレートエンジン「JsRender」のすすめ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。フロントエンドエンジニアをしている清水です。 私は今、スマートフォン向けブラウザゲーム「天下統一クロニクル」を開発・運用しています。 本記事では、天下統一クロニクルで利用しているJsRenderというJavaScriptテンプレートエンジンの基本的な使い方とちょっとしたTIPSを紹介しようと思います。 JsRenderとは？JsRenderとは、テンプレートエンジンの一種です。 jQuery Templatesの作者でもあるBorisMoore氏が、同ライブラリの後継として作成しているライブラリです。 jQuery Templatesの後
Jiko
jiko Full Featured Template Engine for JavaScript View on GitHub Jiko Jiko is a modern and easy to use template engine for Javascript. Its objective is to provide to Javascript programmers a way to write templates with an engine as powerful as server-side state of the art template engines like Jinja and Mako. <% var rows = _.map(_.range(0, 10), function(el) { return _.range(0, 10); }); %> {% funct
GitHub - webpro/precompiled-templates: Performance, footprint and configuration of template engines and precompiled templates
Demo project around precompiled templates for some template engines. The goal is implement and configure things correctly, and to look for minimal footprint and best performance. Module format: AMD (using Require.js + optimizer) Modules are optimized and external templates will be precompiled and bundled. The three optimized modules use the runtime version of each template engine. Template engines
Swig - A Node.js and Browser JavaScript Template Engine
Get Started Install Swig npm install swig Create Your Template <h1>{{ pagename|title }}</h1> <ul> {% for author in authors %} <li{% if loop.first%} class="first"{% endif %}> {{ author }} </li> {% else %} <li>There are no authors.</li> {% endfor %} </ul> Render Your Template var template = require('swig'); var tmpl = template.compileFile('/path/to/template.html'); tmpl.render({ pagename: 'awesome p
mold.js
Mold is a JavaScript templating library. See the Github page for the code and documentation.
手軽にレンダリング！テンプレートエンジンTransparency
はじめに Transparencyは、Javascriptで記述されたテンプレートエンジンです。クライアント側にて機能します。このテンプレートエンジンは以下の特徴を持っています テンプレートをHTMLの一部として記述（DOM構造内に記述） 属性値に基づくデータの結合（<%= foo %>や{{foo}}などは不要） 繰り返し構造の描画（ループ処理の記述不要） 一般的なJavaScriptテンプレートエンジン（Underscore.js、Mustache、jQuery Templateなど）では、テンプレートをSCRIPTタグ内に記述します。レンダリング時にはテンプレートからHTML文字列を生成します。これらのエンジンを使った場合、HTMLファイルを編集しずらかったり、読み込みが遅れて画面がブレることが多々あります。 一方で、Transparencyを使うと、HTMLを編集しやすい上、レンダ
クライアントサイドJavaScriptでのビューの作り方4つ - id:anatooのブログ
追記: 指摘により、UIオブジェクト型を追加した(thx @kanreisa)。 クライアントサイドJavaScriptでのビューの作り方を大別すると、3つ4つある。 DOM操作型 テンプレートエンジン型 UIオブジェクト型 データバインディング型 ここでいうビューの作り方とは、有り体にいうとJavaScriptからどうやってDOM要素を生成したりするかどうか。イベントリスナーの登録とかも含む。 DOM操作型 昔ながらのやり方。jQueryとか使って直接DOM操作してビューを作る。 // 例えば、<div class='hoge'>fugafuga</div> みたいなDOMを表示する var myView = $("<div class='hoge'/>"); myView.text('fugafuga'); // body以下に挿入 $(body).append(myView); 長所
Handlebars.js Tutorial: Learn Everything About Handlebars.js JavaScript Templating
(A Comprehensive Handlebars.js Tutorial) This is a complete tutorial, and indeed a reference, on Handlebars.js templating and, principally, JavaScript templating. Handlebars.js is a client-side (though it can be used on the server, too) templating engine for JavaScript. It is a JavaScript library that you include in your page just as you include any other JavaScript file. And with it, you can add
Best Practices When Working With JavaScript Templates | Envato Tuts+
Maybe you don't need them for simple web apps, but it doesn't take too much complexity before embracing JavaScript templates becomes a good decision. Like any other tool or technique, there are a few best practices that you should keep in mind, when using templates. We'll take a look at a handful of these practices in this tutorial. 1. Underscore for Simple, Handlebars for Complex If you need some
An Introduction to Handlebars | Envato Tuts+
If your site's data regularly changes, then you might want to take a look at Handlebars. Handlebars is a template processor that generates HTML pages dynamically. The ability to generate pages dynamically saves time by eliminating the need for manual updates. This tutorial will introduce Handlebars and teach you how to create a simple template for your website. Site Template There are two primary
クライアントへの理解 - JsRender の高度なテンプレート機能
JsRender は式の評価をサポートしますが、式の割り当てや、ランダム コードの実行はサポートしません。このため、変数の代入を実行する式や、通知ウィンドウを開くなどの操作を実行する式は使用できません。式の目的は、式を評価し、結果をレンダリングするか、結果を基にアクションを起こすか、結果を別の操作で使用することです。 たとえば、JsRender で {{:a++}} を実行すると、変数をインクリメントしようとするため、エラーになります。また、{{:alert('hello')}} も、存在しない #view.data.alert という関数を呼び出そうとするため、エラーになります。 カスタム タグを登録する JsRender には、カスタム タグ、コンバーター、ヘルパー関数、テンプレート パラメーターなど、いくつか強力な拡張ポイントが用意されています。各拡張ポイントを呼び出す構文は、次のと
JsRender JavaScript と HTML を使用してクライアントの洞察力-
この記事は機械翻訳されたものです。 クライアントへの理解 JavaScript、HTML と共に JsRender を使用する (機械翻訳) John Papa コード サンプルのダウンロード テンプレート コードを削減し、メンテナンスを簡素化する多くの開発プラットフォームを使用し、HTML5 と JavaScript の例外はありません。JsRender 定型文構造を一度定義して、HTML を動的に生成するために再利用することができます JavaScript ライブラリです。JsRender 新しいテンプレート ライブラリは、コードレスのタグ構文をおり、高パフォーマンスする jQuery にも、ドキュメント オブジェクト モデル (DOM) には、依存関係は持たないカスタム関数の作成をサポートしています、純粋な文字列ベースのレンダリングを使用 HTML5 開発にもたらします。この列には
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://flippinawesome.org/2014/03/24/string-templating-considered-harmful/
GitHub - ccampbell/aftershave: Compiled javascript templates
JsRender/JsViews
Google Code Archive - Long-term storage for Google Code Project Hosting.
Try Transparency
Emblem.js: a concise, indented alternative Handlebars syntax
Quick JsRender Tutorial – Java Blog | blog.teamextension.com