Jcrop + Twitter Bootstrap js фиксим баг.

Twitter Bootstrap 2.3: Crop Area Continues Moving After Selection

Споймал такой же баг https://github.com/tapmodo/Jcrop/issues/79 (описание на англ)

При выделении области для кропа, она бегает за указателем мыши. В консоли ошибка "Uncaught RangeError: Maximum call stack size exceeded" jcrop.
Оказывается лечится просто:
В Jcrop в функции https://github.com/tapmodo/Jcrop/blob/master/js/jquery.Jcrop.js#L1153

	function toBack() //{{{
	{
	$trk.css({
	zIndex: 290
	});
	$(document).unbind('.jcrop');
	}

view raw gistfile1.js hosted with ❤ by GitHub

строку: $(document).unbind('.jcrop');
заменим на

	$(document).unbind('touchmove.jcrop');
	$(document).unbind('touchend.jcrop');
	$(document).unbind('mousemove.jcrop');
	$(document).unbind('mouseup.jcrop');

view raw gistfile1.js hosted with ❤ by GitHub

все заработало ) 

Шаблонизация в js

http://embeddedjs.com/

Предыстория

Я занимаюсь разработкой IFrame приложений для социальной сети ВКонтакте. Самый удобный способ навигации по приложению — это динамическая подгрузка данных, без перезагрузки всей страницы. Раньше я генерил html код который нужно отобразить на сервере, пока не встретил EJS — JavaScript Templates…

EJS — Embedded JavaScript

EJS оказался одним из самых удобных и подходящих мне шаблонизаторов. Он работает, как с одиночными переменными, так и с массивами (читай объектами), присутствует логика (if...else...).

Покажу на примере, что может данный шаблонизатор.

Шаблон — /templates/question.ejs:

<div>
  <% if(question) { %>
   <h2><%= author %>: <%= question %></h2>
   <div><textarea name="answer" id="answer"></textarea></div>
   <ul class="nNav btnList">
     <li>
      <a href="" onclick="ACT.question.answer('index'); return false;">Ответить</a>
     </li>
   </ul>
  <% } else { %>
   <h2>Нет вопросов, на которые можно ответить!</h2>
  <% } %>
</div>
* This source code was highlighted with Source Code Highlighter.

Данные — /data/question.php:

{"id":"98","question":"What are you doing now?","author":"Mihalich88"}

* This source code was highlighted with Source Code Highlighter.

Результат:

$.ajax({
  type: "POST",
  url: "/data/question.php",
  dataType: "json",
  data: data,
  success: function(ans){
   var html = new EJS({url: ' /templates/question.ejs'}).render(ans);
  }
});

* This source code was highlighted with Source Code Highlighter.

В итоге

+ «плюсы»

1. Экономия траффика, т.к. передаются только данные ввиде json-объекта, шаблон кэшируется и берется из кэша
2. Снижение нагрузки на сервер, т.к. шаблонизация происходит в браузере
3. MVC структура, с выводом «V» за пределы сервера
4. Работает даже на Opera Mobile 10

— «минусы»

1. Не индексируется, но зато идеально подходит для RIA

Пример приложения, использующего EJS: http://formspring.vk-app.ru
Подводный камень: шаблонизатор работает только с файлами у которых расширение *.ejs. Хотел, чтобы шаблоны имели расширение *.tpl, но не получилось — виснит на рендеринге… Возможно, если поковырять, то все заработет.