Angular.js + Knockout.js

    Недавно я перешел с knockout.js на angular.js, оба инструмента мне нравятся, но в каждом из них есть свои преимущества перед «конкурентом».
    И тут выпал скучный вечер, решил я, just for fun, слепить свой MV* инструмент.

    Мне не очень нравятся разухабистые фреймворки, я отдаю предпочтение библиотекам, и от angular мне в основном нужно было 2 вещи: scope — данные и их мониторинг, applyBindings — привязать этот scope к DOM.

    С этого я и начал свой велосипед, в итоге у меня есть:
    scope = alite.Scope(); - создать scope
    alite.applyBindings(scope, dom); - привязать к DOM

    Добавим переменную:
    scope.title = 'hello';

    И сделаем «bind» в DOM:
        <h1 data-bind="text: title"></h1>
        <input type="text" data-bind="value: title" />
     
    Пример:
    plnkr.co/edit/nvDY1k?p=preview

    Пример ToDo:
    plnkr.co/edit/FAcLlC?p=preview

    Директивы — обычные ф-ии которые вызываются когда applyBindings доходит до data-bind, складываем их в alite.directives:
    alite.directives.text = function(element, attrs, scope) {
        var attr = attrs.text;  // Имя параметра
        scope.$watch(attr, function(value) {  // Подписываемся на изменения
            element.text(value);  // Выводим значение (через jQuery)
        })
     
        var value = scope.$eval(attr); // Получить значение
        element.text(value);
    };

    Некоторые факторы в защиту «велосипеда»:
    • В angular мне не всегда нравится «возня» с модулями. (сделал это подобно как в knockout.js)
    • Почему data-bind? Что-бы выскакивала ошибка если директивы нет, хотя можно сделать как угодно. (подобно как в knockout.js)
    • О jQuery: Angular и Knockout работают без jQuery и поддерживают разные виды браузеров, т.е. у них заложена эта совместимость внутри. Но зачем, если можно использовать jQuery, все равно его приходится подключать (чуть ли не) в каждый проект, ради timepicker, select2 и пр.
      (тот же angular.ui требудет jquery). Хотя может он не нужен например для связок Knockout.js + kendo-ui.
    • «Для angular.js есть много готовых директив!». Несколько последних проектов с angular.js показали что многие готовые директивы либо не подходят либо их нет. В итоге все равно пришлось их делать самому. Поэтому подобный велосипед (но product версии) без готовых директив был бы не хуже чем angular.js

    Директивы, хотя в knockoute можно сделать аналогичные, все же из коробки они другие:
    bind click: data-bind=«click: on_click()» — указываем то что нужно сделать, вместо указания ф-ии как в knockout (подобно как в angular.js)
    bind repeat: — крутим сам элемент, а не его содержимое (подобно как в angular.js)

    «Ядро» (пока) состоит всего лишь из примерно 200 строк, поэтому его можно будет легко перепилить под себя.

    PS: Это всего лишь прототип велосипеда, поэтому в нем что-то не будет работать.
    Исходники

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    Стоит ли развивать?
    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 2
      +1
      Имеет смысл глубже изучить ангуляр, либо не уходить с knockout. Сливать два MVVM фреймворка это… извращение. Да еще и приправленые jQuery-вставками. Не дай бог поддерживать такого монстра.
        +1
        О jQuery: Angular и Knockout работают без jQuery
        Это распространенное заблуждение, Angular — работает на jQLite, если перед ним подключить jQuery, то будет использоваться именно он.

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое