Всем привет. Представляю очередное обновление фреймворка Matreshka.js до версии 0.2. Напомню: Матрешка — фреймворк общего назначения с окрытым исходным кодом, в идеологию которого положено доминирование данных над внешним видом: вы задаёте правила, как интерфейс должен синхронизированться с данными, затем работаете исключительно с данными, кроме случаев, когда событие интерфейса не касается данных (например, щелчек по кнопке или сабмит формы, сами по себе, не меняют данные, а запускают функцию, которая, в свою очередь, работает с данными).
Пример
Матрешка позволяет довольно просто связать данные и элементы представления (например, свойство объекта и значение поля ввода), не заботясь о дальнейшей синхронизации данных и представления. Например, самая простая привязка выглядит так:
<select class="my-select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Создаем экземпляр:
var mk = new Matreshka();
Связываем свойство x с элементом .my-select
:
mk.bindElement( 'x', '.my-select' );
Меняем данные
mk.x = 2;
После того, как мы присвоим свойству x другое значение, остояние элемента изменися соответствующим образом.
Взгляните на живой пример
Другой важной чертой матрешки являются события (в том числе и кастомные). Например, Матрешка умеет отлавливать изменение значения свойства:
mk.on( 'change:x', function( evt ) {
alert( 'x изменен на ' + evt.value );
});
Код выведет "x изменен на Привет"
:
mk.x = 'Привет';
Подробнее об этих и других фичах смотрите по ссылкам выше.
Ссылка на сайт Матрешки. Ссылка на github репозиторий.
Поддержка AMD
Матрешка теперь моддерживает спецификацию определения асинхронных модулей, Asynchronous Module Definition. Другими словами, Матрешка совместима с библиотеками, типа requirejs. Это значит, что теперь можно писать тру-код, не гадящий в глобальное пространство имен. Поддерживается два типа подключения: запрос именованного модуля и запрос безымянного модуля.
Именованные модули:
requirejs.config({
paths: {
xclass: 'path/to/matreshka',
matreshka: 'path/to/matreshka'
}
});
require(['xclass', 'matreshka'], function(Class, MK) {
return Class({
'extends': MK
//...
});
});
Но это, скорее, побочный эффыект использования новой файловой структуры проекта. А рекомендованный способ — запрос безымянного модуля:
require(['path/to/matreshka'], function( MK ) {
return MK.Class({
'extends': MK
// ...
});
});
Как видете, Матрешка содержит свойство Class
, которое дублирует функцию, создающую классы: нет нужды запрашивать дополнительный модуль.
Читать полностью »