templates = {
contact_details : function( data ){
return "" +
"Name: " + data.name + "
" +
"Phone: " + data.phone + "
" +
"email: " + data.email " +
"
";
}
Que l'on utilise avec jQuery:
$(this).append( templates.contact_details(p) );
ou pour des instances multiples:
var output = '';
$.each( persons, function(p){
output+= templates.contact_details(p);
});
==== JavaScriptCodeBehind ====
http://javascriptcodebehind.codeplex.com/
Séparation du Javascript et du HTML sur le principe de CodeBehind d'ASP.
"//The aim of this paper is to present a technique for separating the JavaScript code of a HTML page. The result is a .js file that contains all the logic of programming of the page. It's the same idea of code-behind files in ASP.NET, defining the concepts: the server code-behind file (.cs, for example) and client code-behind file (.js).//"
====Cappuccino====
Cappuccino is an open source framework that makes it easy to build desktop-caliber applications that run in a web browser.
http://cappuccino.org
==== JavaScript Client Pages ====
http://jsclientpages.codeplex.com/
"//JavaScriptClientPages is a cross-browser, cross-platform tool, which makes dynamic client-side content generation as easy as it is on the server side with technologies like ASP.net, PHP, Ruby on Rails, etc.. Each JavaScritpt Client Page is a complete XHTML page with embedded JavaScript code, as well as custom output tags that make it possible to create clean XHTML templates with advanced presentation logic while eliminating the drudgery of writing custom DOM manipulation code or innerHTML construction.//"
JSCP Code Sample :
Code
Name
Price
Item #
==== Knockout ====
==== mustache ====
Logic-less templates with JavaScript.
[[http://mustache.github.com/]], [[https://github.com/janl/mustache.js/]]
var view = {
title: "Joe",
calc: function() {
return 2 + 4;
}
}
var template = "{{title}} spends {{calc}}";
var html = Mustache.to_html(template, view);
==== JavaScript Micro-Templating ====
Quelques lignes de Javascript pour un simple moteur de template côté client, c'est fun ;-)
[[http://ejohn.org/blog/javascript-micro-templating/]]
==== Pure ====
Simple and ultra-fast templating tool to generate HTML from JSON data.
[[http://beebole.com/pure/]]
==== jQote ====
jQote2 is the second major release of jQuery’s most powerful and versatile client-side templating engine. Version 2 now incorporates a faster and more accurate parsing/conversion part that does away with its predecessor’s shortcomings in escaping quotes and multiline support.
jQote (pronounced like Star Trek’s Chakotey) is basically a rewrite of John Resig’s awesome JavaScript Micro-Templating utility. I took his code and ported it to jQuery, overhauled the parsing / conversion part and extended it’s functionality to minimize everyone’s coding efforts.
[[http://aefxx.com/jquery-plugins/jqote/]] => [[http://aefxx.com/jquery-plugins/jqote2/|jQote2]]
==== trimpath ====
For web application developers, the '''JavaScript Templates''' engine from TrimPath is a lightweight APL / GPL open-source component that lets you have template-based programming (like PHP/ASP/JSP) while running in a web browser.
* The '''JST''' engine is written entirely in standard JavaScript.
* It supports a productive template markup syntax very much like FreeMarker, Velocity, Smarty.
* JST is a readable alternative to manually coded massive String concatenations and major DOM/DHTML manipulations.
Build your own modern, brilliantly rich web applications (like GMail/OddPost/Bloglines) with JavaScript Templates.
http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
==== Jaml: JavaScript Haml ====
Jaml is a small but delightful way of rendering HTML using JavaScript. It uses a simple DSL-like syntax to DRY up your code.
There are only 2 steps - registering a template and rendering it. Let's look at something simple first. On the left of each example is the source code, and on the right the rendered output.
http://edspencer.github.com/jaml/
==== EJS: Embedded JavaScript ====
EJS cleans the HTML out of your JavaScript with client side templates. After EJS gets its rubber gloves on dirty code, you'll feel organized and uncluttered.
[[http://embeddedjs.com/]]
==== microtemplate ====
MicroTemplate is a javascript template engine based on the john resig's microtemplate engine.
Template syntax is very easy, usefull and powerfull because you can use normal javascript.
* It's lightweight and simple. 1.4 kb of uncompressed code.
* It's the fastest engine.
* Supports manuplating with jquery when code generating.
https://github.com/ismail-codar/microtemplate
==== GWT App ====
GWT App is a HTML templating for GWT based on JSP and similar to use like UiBinder. HTML templates don't need to be compiled together with GWT application and can be changed by web designer at any time without GWT application recompilation.
GWT App provides several features and benefits like:
* Declarative HTML templating at runtime without application recompiling and templates content generated dynamically by JSP and JSTL.
* Holds GWT's primarily as a reliable business logic framework by moving out a view decorations into HTML templates.
* SEO support by means of HTML templates embeddable into the main page.
* MetaField to simulate Java annotation and for RPC data auto binding.
* Strong typing in MVC including Java generics.
* Passing serialized RPC data into HTML main page for no delay access to the initial data.
* Like-tree hierarchical MVC structure (PAC/HMVC).
* Pipe channels to skip over the model flow between units in the like-tree MVC hierarchy.
* Modular acyclic structure in Maven.
http://gwtapp.org/
===== Web Client-Side Database & localStorage =====
http://www.html5rocks.com/fr/features/storage
* Le **stockage Web** permet le mappage de paires valeurs-clés, par exemple localStorage["name"] = username;. Malheureusement, les mises en œuvre actuelles ne sont compatibles qu'avec le mappage de type "chaîne à chaîne". Cela vous oblige donc à sérialiser et désérialiser d'autres structures de données. Pour cela, vous pouvez utiliser JSON.stringify() et JSON.parse().
* La **base de données Web SQL** vous offre toute la puissance d'une base de données relationnelle SQL structurée.
* La **base de données indexée** est à mi-chemin entre Web Storage et Web SQL Database. Tout comme le stockage Web, elle propose un mappage de paires valeurs-clés simple, mais offre en plus une compatibilité avec les index du même type que ceux utilisés par les bases de données relationnelles. Par conséquent, la recherche d'objets correspondant à un champ particulier est rapide, puisque vous n'avez pas à itérer manuellement chaque objet du magasin.
* **File Access** est une API permettant de lire le contenu de fichiers JavaScript. À l'aide d'un ensemble de fichiers ajoutés par l'utilisateur à un élément d'entrée de type "file", vous pouvez lire le contenu d'un fichier ou bien le référencer en tant qu'URL (par exemple, si l'utilisateur a spécifié un fichier d'image, vous pouvez afficher cette image). Des propositions de fonctionnalités d'écriture de fichier sont actuellement à l'étude.
==== sql.js, a SQLite Javascript port ====
SQLite compiled to javascript.
sql.js is a port of SQLite to JavaScript, by compiling the SQLite C code with Emscripten. no C bindings or node-gyp compilation here.
SQLite is public domain, sql.js is MIT licensed.
https://github.com/kripken/sql.js
==== full-text search engine, moteur de recherche texte ====
[[http://lunrjs.com|LUNR.js]] a simple full-text search in your browser.
==== Webapp & Offline mode ====
* [[https://verekia.com/html5/tutoriel-application-web-offline-html5-cache-manifest/|Tutoriel : Une application web offline HTML5 avec le cache manifest]]
* [[https://developers.google.com/web/fundamentals/codelabs/offline/|Adding a Service Worker and Offline into your Web App]]
* [[https://www.sitepoint.com/offline-web-application-tutorial/|How To Create an Offline Web Application]] (02/2010)
===== Démos =====
4k
* https://www.youtube.com/watch?v=5lbAMLrl3xI
* http://www.youtube.com/watch?v=mQFjReMd2us [[http://ylilammi.com/webgl/highway4k/Making%20of%20Highway%204k.pdf|making of]]
* http://www.youtube.com/watch?v=bPYWIAu24XQ
256b
* http://www.p01.org/releases/MINI_DISTRICT/
===== Tips =====
==== Stop running this script ? ====
[[http://www.nczonline.net/blog/2009/01/05/what-determines-that-a-script-is-long-running/|What determines that a script is long-running ?]]
Note that the IE limit of 5M instructions was first put in place back in 1997 as part of IE3 and, I believe, has not been changed in that time.
The slow script error does not seem to be limited to a single script. Run a script once with a button click and there is no error. Run it again by clicking the button a second time and you get the error. So the counter seems to be cumulative in some cases, not limited to a single script. The script in question is a simple for-loop intended to trigger the slow script error, so the instructions per click should be identical.
A way to asynchronously process JavaScript arrays to avoid locking up the browser (and further, to avoid displaying the long-running script dialog) : [[http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/|Timed array processing in JavaScript]]
==== Browser Detection and Cross Browser Support ====
Ne pas utiliser des méthodes du genre is_ie, is_opera, is_win,is_nav2, is_nav3... Mais plutôt tester chaque fonctionnalité:
if (document.body && typeof(document.body.offsetHeight) == 'number')
{
height = document.body.offsetHeight;
}
else if (typeof(window.innerHeight) == 'number')
{
height = window.innerHeight;
}
else
{
height = 0;
}
Voir [[https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support|Browser Detection and Cross Browser Support]]
Et sur la page [[http://www-archive.mozilla.org/docs/web-developer/sniffer/browser_type.html|The Ultimate JavaScript Client Sniffer, Version 3.03]] il est bien écrit que cette méthode est obsolète.
=== Détection de la version de javascript ===
La méthode suivante n'est pas fiable après depuis le HTML 3.2 et encore moins après le HTML4+ car les dernières génération se basent sur l'attribut "type" et non pas language.
Donc encore une fois il faut se baser sur les fonctionnalités, et donc voir les changelogs et "What's new" des spécifications de Javascript.
=== image preview ===
http://jsfiddle.net/Fractaliste/LvsYc/1669/
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#target').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});