ненавязчивый jquery и рельсы - PullRequest
Новая
       2

ненавязчивый jquery и рельсы

1 голос
/ 15 февраля 2011

Я был поклонником UJS в течение самого длительного времени, и я обычно помещаю ВСЕ свой код в application.js (jquery, а не прототип)

Однако я столкнулся с огромным проектом, который будет раздутapplication.js, если оставить его без присмотра, и я не хочу, чтобы это произошло, тем более что большинство моих функций / поведения будут основаны на конкретных страницах.Прямо сейчас я склонен ставить вызовы javascript на определенные части, например так:

на _test_partial.html.haml: 

%p= link_to "Expand All", '#', :class => "expand-categories"

:javascript
  $(function() {
    $('.expand-categories').click( function() {
      $(".test-cases").slideToggle();
      return false;
    })
  })

Или, если я действительно хотел "ненавязчивые" вещи:

%p= link_to "Expand All", '#', :class => "expand-categories"

= javascript_include_tag 'test-categories.js'

Но мне кажется, что это все еще очень навязчиво, так как, если мне нужно отредактировать код / ​​поведение, мне придется искать соответствующую частичку.С другой стороны, это не так просто, как очистить 1MB (есть много страниц и, вероятно, будет много кода для конкретной страницы) application.js функции, которую мне нужно отредактировать.

Как обычновзять на себя это?Есть ли способ для меня, чтобы назвать файл JS аля RJS как test_partial.js.erb или что-то еще?

Ответы [ 2 ]

2 голосов
/ 15 февраля 2011

Лично я стараюсь держать все свои javascript под публичным / javascript, насколько это возможно.Однако я разбиваю файл application.js на несколько файлов на основе «поддоменов», например application.profiles.js, application.albums.js и т. Д., Причем каждый файл реализует Module Pattern .Этот подход позволяет вам аккуратно разделить ваш код javascript, загружать его по мере необходимости, и я полагаю, что это поможет вам быстро найти функции.

Для одного файла или «субдомена» (например, application.profiles).js), вы можете дополнительно разделить ваш код, используя «Шаблон дополнения», описанный в этой статье .Таким образом, вы можете получить что-то вроде application.profiles.core.js и application.profiles.viewer.js, где, например, модуль application.profiles.viewer.js расширяет модуль application.profile.core.js.

Надеюсь, это поможет.

1 голос
/ 15 февраля 2011

В последнее время я часто использую параметр данных, как это делает rails.js.Поэтому, если у меня есть что-то вроде вашей проблемы, я помещаю скрипт либо в application.js, либо, если это сложный проект, в один из «классов» JavaScript (объясню позже).

// application.js
$('[data-action="expand-categories"]').bind('click', expand_categories);

Что касается шаблона использования, я создаю файлы javascript, логически разделенные для каждой части приложения.До сих пор мне было достаточно отдельных файлов для front и back-end, но их можно использовать для каждого шаблона функции.Это довольно сложный шаблон, но его легко поддерживать, и он выглядит примерно так (используя head.js): 

// application.js
head(function () {
  if ($([data-action="expand-categories"]).length) {
    var expand_categories = new ExpandCategories();
    expand_categories.init();
  }
}

... 

// expand_categories.js
var ExpandCategories;
ExpandCategories = function(){

  var self;
  self = this;

  self.init = function(){
    /* 
     * This is something like public method.
     * Use it to call some private method depending on some condition
     */

    // no need to check for existance, we did it on application.js
    var expand = $('[data-action="expand-categories"]'); 
    if (expand.text("some specific text")) {
       expand.live('click', expand_categories);
    }
  }

  var expand_categories(){
    // This is something like "private" method
    // ... expand categories
  }

}
...