Я новичок в RoR и JS, и мне может понадобиться помощь, чтобы понять, как некоторые из этих частей сочетаются друг с другом. Я прочитал ряд ресурсов и думал, что понял, что делать, но что-то все еще ускользает от меня.
Я хочу создать интерфейс для ввода тегов, очень похожий на тот, что здесь, на Stack Overflow. Я нашел следующий плагин, в котором есть все функции, с которыми мне хотелось бы повозиться: http://xoxco.com/projects/code/tagsinput/
Итак, вот что я сделал:
1) Я скачал архив.
2) Я поместил jquery.tagsinput.js и jquery.tagsinput.min.js в vendor/assets/javascripts .
3) Я поместил jquery.tagsinput.css в vendor/assets/stylesheets.
4) В мои представления/ nuggets/index.html.erb, я добавил <input name="tags" id="tags" value="foo,bar,baz" />
5) В моем app/assets/javascripts/nuggets.js.coffee я добавил $('#tags').tagsInput();
Когда я заметил, что ввод не работает должным образом, я проверил исходный код страницы и заметил, что там нет следующих строк:<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
В результате я решил добавить //= require jquery.tagsinput
в app/assets/javascripts/application.js и *= require jquery.tagsinput
в app/assets/stylesheets/application.css.
Я уверен, что в ретроспективе все это покажется очень тривиальным, но сейчас я совсем запутался.
Спасибо за вашу помощь,
Грассвистл
Редактировать, добавляя информацию для @user1965817:
Содержимое app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require jquery.tagsinput
Содержимое файла app/assets/stylesheets/application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*/
*= require jquery.tagsinput
body
{
background-color:#C5C5F0;
font-family: Geneva, Tahoma, Verdana, sans-serif;
}
.header
{
font-family: Geneva, Tahoma, Verdana, sans-serif;
font-size:30px;
text-align:center;
top: 0px;
margin:0px;
padding: 0px 2px 2px 3px;
margin-bottom: 70px;
border-width: 2px;
border-bottom: 1px gray solid;
width: 70%;
}