Posts Tagged ‘jquery’

Шаблоны приложений в Rails 3

Вторник, Март 1st, 2011

Rails 3 вышел несколько месяцев назад, и одним из многих изменений было обновление API для генераторов и шаблонов приложений. Если вы еще не знаете, то теперь в Rails 3 используется Thor для этих целей, что даёт большую модульность и настраиваемость.

Но зачем использовать шаблоны при создании приложения, если в Rails и так достаточно легко все настраивается? Причина здесь в том, что один раз настроив приложение так, как вам нужно, вам не придется в дальнейшем настраивать каждое новое приложение, вы сможете воспользоваться готовым шаблоном и это избавит вас от рутины.

Шаблон позволит вам один раз задать различные настройки для вашего приложения, так же включая генерацию нужных файлов - и вы сможете пользоваться таким шаблоном от приложения к приложению.

Вот так, например, выглядит шаблон, подготовленный Аароном Самнером:

# Создание rvmrc файла
create_file ".rvmrc", "rvm gemset use #{app_name}"

gem "haml-rails"
gem "sass"
# hpricot и ruby_parser используются гемом haml
gem "hpricot", :group => :development
gem "ruby_parser", :group => :development
gem "nifty-generators"
gem "simple_form"
gem "jquery-rails"

# Аутентификация и авторизация
gem "devise"
gem "cancan"

# rspec, factory girl, webrat, autotest для тестирования
gem "rails3-generators", :group => [ :development ]
gem "rspec-rails", :group => [ :development, :test ]
gem "factory_girl_rails", :group => [ :development, :test ]
gem "webrat", :group => :test
gem "ffaker", :group => :test
gem "autotest", :group => :test

run 'bundle install'

rake "db:create", :env => 'development'
rake "db:create", :env => 'test'

generate 'nifty:layout --haml'
remove_file 'app/views/layouts/application.html.erb' # вместо этого используется nifty layout
generate 'simple_form:install'
generate 'nifty:config'
remove_file 'public/javascripts/rails.js' # jquery-rails заменит стандартный prototype-ujs
generate 'jquery:install --ui'
generate 'rspec:install'
inject_into_file 'spec/spec_helper.rb', "\nrequire 'factory_girl'", :after => "require 'rspec/rails'"
inject_into_file 'config/application.rb', :after => "config.filter_parameters += [:password]" do
  <<-eos

    # Настройка генераторов
    config.generators do |g|
      g.stylesheets false
      g.form_builder :simple_form
      g.fixture_replacement :factory_girl, :dir => 'spec/factories'
    end
  eos
end
run "echo '--format documentation' >> .rspec"

# Настройка аутентификации и авторизации
generate "devise:install"
generate "devise User"
generate "devise:views"
run "db:migrate"
generate "cancan:ability"

# Удаляем ненужные файлы, копируем конфиг БД и добавляем его в игнор
remove_file 'public/index.html'
remove_file 'rm public/images/rails.png'
run 'cp config/database.yml config/database.example'
run "echo 'config/database.yml' >> .gitignore"

# Создаем git-репозиторий и делаем первый коммит
git :init
git :add => "."
git :commit => "-a -m 'create initial application'"

say <<-eos
  ============================================================================
  Your new Rails application is ready to go.

  Don't forget to scroll up for important messages from installed generators.
eos

Достаточно просто, не правда ли? Воспользоваться таким шаблоном можно так:

$ wget https://gist.github.com/848735.txt
$ rails new appname -m 848735.txt

Я сейчас создаю специальный гем, который поможет упростить создание новыйх приложений Rails 3 - этот гем называется playmo-rails, и уже можно посмотреть некоторые наработки. Мой гем так же использует Thor для генерации различных файлов. Этот гем создан для быстрого старта - можно создать новое приложения, добавляя в него нужные библиотеки и расширения, просто отвечая на вопросы установщика. И это очень удобно.

Пока playmo-rails умеет не так уж много:

  • Создает приложение и использованием Compass
  • Лайот приложения использует html5 boilerplate
  • Можно выбрать установку JQuery либо Mootools
  • Удаляет ненужные файлы из нового rails-приложения

Планов по playmo-rails достаточно много, например, добавить поддержку других фреймворков, полезных общеиспользуемых хелперов, таких как title, динамические страницы 500, 404, 422. В общем, в скором времени, playmo-rails будет той штукой, которая избавит вас от всех манипуляций которые вы делаете с каждым новым rails-приложением.

How does the event bubbling works in Javascript?

Суббота, Ноябрь 28th, 2009

Few people knows how events works in javascript. Currently, many people use frameworks, and do not realize how event works, so they are spend much time on simple things.

I’ll tell about a widely known in narrow circles thing such as event bubbling. What I’m talking about?

When we are click on any element on the web page, the event is raised on all the parent nodes of clicked element, until it reaches the document node. This is event bubbling as is.
Let’s see clearly how it works, it’s better to see than tell a thousand words.
(далее…)

Event bubbling в Javascript - что это такое?

Пятница, Ноябрь 27th, 2009

Мало кто знает, как работают события в Javascript. Сейчас же модно юзать фреймворки, вот люди и не задумываются, как оно там работает и зачастую, тратят очень много времени на простые вещи.

Я расскажу про такую широко известную в узких кругах фишку, как event bubbling. Что это вообще такое?

Когда мы кликаем по-какому либо элементу на странице, то событие поднимается по всем родительским узлам кликнутого элемента, пока не дойдет до узла document. Это и есть event bubbling.
Посмотрим наглядно как это работает, ведь лучше увидеть, чем сказать тысячу слов.

Есть HTML:

<div id="dialog">
    I'm a absolutely positioned dialog. So click me!
</div>

Есть CSS:

<style type="text/css">
#dialog {
    padding: 200px;
    position: absolute;
    top: 100px;
    left: 100px;
    border: 1px solid #000;
    background: #ddd;
}
</style>

И, самое главное, есть javascript (JQuery):

<script type="text/javascript">
$(document).ready(function() {
    $('#dialog').click(function(e) {
        alert('Clicked on dialog!');
    })

    $(document).click(function(e) {
        alert('Clicked on document!');
    })
});
</script>

Как видно по коду, у нас навешаны колбэки на клик по диалогу, а так же на клик по документу. Давайте теперь откроем рабочий пример и кликнем по диалогу. Что получилось? А получилось 2 алерта, алерт диалога и алерт документа. Почему так вышло, мы же кликнули только по диалогу? Причина этого именно в event bubbling’е.

Давайте теперь сделаем так, чтобы при клике по диалогу появлялся только алерт этого диалога. Все, что нужно сделать, это отменить event bubbling, чтобы он не поднимался вверх по DOM узлам. Сделать это можно просто добавив e.stopPropagation() в колбэк диалога. Все. Давайте посмотрим второй пример.

Вот так, вроде простая вещь - но знают о ней немногие. Ее знание сильно облегчает разработку на javascript. Как, например, без особых извращений сделать так, чтобы какой-либо элемент на странице скрывался при клике вне этого элемента? Только через event bubbling!

До скорого.