Поиск по метке: JavaScript

Knockout и this

3 июля 2014

Knockout, безусловно, весьма мощная библиотека, которая позволяет сэкономить море времени, но некоторые моменты в её работе, мне показались неудобными. Про один из них эта заметка. Binding «click» просит указать метод, но особенности JavaScript-а, не позволяют удобным способом указать метод и объект this, для его вызова. В итоге мы имеем вот такие вот уродливые конструкции

<span data-bind="click: $root.save.bind($root)"></span>
<span data-bind="click: $root.edit.bind($root, 'someParameter')"></span>

У меня возникло желание как это дело упростить. Я решил остановиться на таком варианте:

<span data-bind="click: @save"></span>
<span data-bind="click: [@edit, 'someParameter']"></span>

Возможно, не очень очевидный синтаксис, но никто не мешает придумать свой :) Итак, задача состоит в том, чтобы заставить knockout эти конструкции принимать за нужный метод. Для этого воспользуемся хаком preprocess для binding-а click. У меня получилось примерно так:

    ko.bindingHandlers.click.preprocess = function( val )
    {
        val = $.trim( val );

        if( val[ 0 ] === '@' )
        {
            var method = val.substr( 1 );
            return 'function(){ return $root["' + method + '"].apply( $root, arguments ); }';
        }

        if( val[ 0 ] === '[' && val[ val.length - 1 ] === ']' )
        {
            val = $.trim( val.substr( 1, val.length - 2 ) );
            var params = val.split( /\s*,\s*/ );
            if( params[ 0 ] && params[ 0 ][ 0 ] === '@' )
            {
                var method = params.shift().substr( 1 );
                var args = params.join(', ');
                var js = 'function()\n' +
                    '{\n' +
                        '\tvar args = [ ' + params + ' ].concat( _.toArray( arguments ) );\n' +
                        '\treturn $root["' + method + '"].apply( $root, args );\n' +
                    '}';
                return js;
            }
        }

        return val;
    }

Решение пока черновое и не обкатанное. К тому же на click-е мир клином не сошёлся и нужно что-то более универсальное.

Пишем плагин для CKEditor 4

30 ноября 2013

CKEditor - это WYSIWYG редактор HTML-кода для браузеров. Всякий раз, сталкиваясь с его документацией или же с его исходным кодом, с исходным кодом его плагинов я терялся. И это не мудрено, ведь CKEditor это очень большой продукт, имеющий довольно сложную инфраструктуру. Но, зачастую, стандартных возможностей не хватает и требуется добавить свою. В этой статье я хотел бы остановиться на плагине, который позволяет встраивать и оперировать в редакторе Yandex-картами. Вот так это будет выглядеть по окончанию редактирования:

подробности…

IE7-8, jQuery и XFBML

31 мая 2012

Столкнулся с тем, что jQuery не умеет создавать DOM-элементы с составными именами, вроде <fb:like> в старых версиях IE. Решение - document.createElement( '<fb:like>' ). Пусть вас не смущает, что elem.tagName === 'like', на самом деле он нормальный.

Мне все эти шаманства понадобились для динамического встраивания соц. кнопок "мне нравится" и таких же лент комментариев. Посему поделюсь некоторым опытом. Для того. чтобы в нужный момент заставить браузер подготовить плагин к использованию, нужно заранее загрузить все необходимые скрипты а после выполнить:

Для mail.ru и одноклассников - mailru.loader.require( 'api', function(){ mailru.plugin.init(); } );
Для vKontakte - VK.Widgets.НужныйВиджет( id_dom_элемента, { настройки плагина } )
Для Twitter - twttr.widgets.load();
Для Google+ - gapi.plusone.render( id_dom_элемента );
Для Facebook - FB.XFBML.parse();

При этом для facebook-а и g+ обязательно нужно задать все <meta property="og:*" content="..." /> теги и дополнительные аттрибуты к тегу <html>:

xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:og="http://ogp.me/ns#"
itemscope="itemscope"
itemtype="http://schema.org/Product"

вКонтакте - кнопка «мне нравится» и pageImage

30 мая 2012

Подключил на сайте заказчика кнопку "мне нравится" от вконтакте, однако в ней не заработала опция pageImage, в виду чего ссылка шарилась просто как "сопроводительный текст + ссылка", что непособствует появлению дополнительных лайков(уже из самой соц.сети). Гугл подсказал мне, что я такой не один, и что никто не знает как сию проблему решить. Написал в support — ответили ~ через сутки. Сказали сменить расширение изображения с jpeg на jpg . Сразу не помогло. Оказалось - кеш. Сменил page_id - заработало.

UPD 1. Ответили из vk, пишут:

К сожалению, пока обновление кэша не предусмотрено. Возможно, в скором будущем ситуация будет исправлена.

Значит у разработчиков нет права на ошибку (к тому же, если я не ошибаюсь, незадокументированную)? о_О

Пишем простое Opera-расширение

14 апреля 2012

Эта статья посвящена написанию простого расширения для браузера Opera. Наше расширение будет примитивным, т.к. весь его функционал будет заключаться в user-JS для habrahabr.ru. Лента комментариев оснащена блоком, который отображает количество новых комментариев в топику и кнопку, позволяющую эту ленту обновить. Давайте добавим туда стрелки для навигации по новым комментариям.

C чего начнём?

Создадим новую директорию для файлов расширения
В ней создадим файл config.xml

подробности…

назад вперёд

1 … 6 7 8 9 10

Faiwer