Rails jquery не работает на представлении haml

Question

Я хотел бы знать, есть ли зависимости, которые могут отсутствовать, поскольку мой вывод представления haml является статическим; jquery не выполняется. Я новичок в рельсах и jquery и работаю над проектом. Мой код ниже:

%h2 Admin Home Screen 
%tr 
%th Vendor 
- @vendors.each do |vendor| 
    %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "#{vendor.company_name}"} 
    = vendor.company_name 
    %p - vendor.title 

%script{:type=>"text/javascript"} 
$(function() 
{ 
    $("#accordion").accordion(); 
} 
); 

Я вижу выход, но ничего не делает. Какие файлы и зависимости я должен искать и включать в свой проект?

Спасибо!

Answer 1

Я новичок в обоих рельсах и JQuery

Поскольку вы новичок, я объясню, как вы должны это сделать:

---

Во-первых, не включают в JavaScript прямо в ваш документ. Вы должны использовать asset pipeline для создания unobtrusive JS:

#app/assets/javascripts/application.js 
var option = function(){ 
    $("#accordion").accordion(); 
}; 
$(document).ready(option); 

Преимущества этого многочисленны:

• Он держит ваш views подальше от дерьмовый JS
• Это позволяет повторно использовать код (DRY - Don't Repeat Yourself)
• Это держит вас в здравом уме, имея центральное место для всех ваших JS (так, чтобы вы знали, где его найти)

Ваше мнение должно быть абсолютно без JS в нем вообще.

-

Для самого JS, вы должны убедиться, что вы вызываете существующую функцию (.accordion в вашем случае), а также, что вы связываете с JS в правильном направлении.

Одной из основных проблем для пользователей Rails является невозможность «привязать» их JS к их DOM из-за отсутствия вызова document. Способ сделать это состоит в использовании $(document).ready() или $(document).on("page:load"..., если вы используете Turbolinks, чтобы вызвать функцию, которая содержит привязки:

#app/assets/javascripts/application.js 
var your_function = function() { 
    // bindings in here 
}; 
$(document).ready(); // if no turbolinks 
$(document).on("page:load", your_function); // if using turbolinks 

-

Debugging

Debugging javascript - это основной способ узнать, что мешает ему работать должным образом.

В настоящее время отладка на самом деле довольно проста - вы можете использовать Javascript console в своем браузере. чтобы вызвать его, right click > inspect element > console:

Это покажет вам какие-либо ошибки, созданные JS.Пока я не могу прочитать ваш компьютер, вы сможете получить гораздо более полезные ответы, разместив на консоли конкретные ошибки/отчеты.

---

Bootstrap

Во-вторых, ваше использование accordion не может быть правильным.

Я полагаю, что вы пытаетесь использовать самозагрузки для достижения эффекта типа «гармошка»: http://getbootstrap.com/javascript/#collapse ... может быть, я ошибаюсь.

Если вы являются с помощью bootstrap, вам необходимо убедиться, что вы включили самозагрузки в вашем Gemfile и JS:

#Gemfile 
gem "therubyracer" 
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS 
gem "twitter-bootstrap-rails" 

#app/assets/javascripts/application.js 
//= require twitter/bootstrap 

// -> your stuff here 

У меня нет огромного количества опыта с Bootstrap. Он работает так же, как и любая другая реализация JS - чтобы он работал правильно, вам просто нужно убедиться, что вы можете привязываться к правильному элементу DOM и вызвать правильную функцию.

Answer 2

Правильный способ вставки JavaScript в Haml выглядит следующим образом:

:javascript 
    //Your code goes here 

Это, вероятно, работает, если заменить

%script{:type=>"text/javascript"} 
$(function() 
{ 
    $("#accordion").accordion(); 
} 
); 

с этим:

:javascript 
    $(function() 
    { 
     $("#accordion").accordion(); 
    } 
);