простой ввод пользовательской формы с заголовком content_for javascript? - PullRequest
Новая
       5

простой ввод пользовательской формы с заголовком content_for javascript?

0 голосов
/ 13 февраля 2019

Я использую DatePicker и хочу создать собственный ввод simple_form

В настоящее время я делаю это в КАЖДОЙ форме: 

<link rel="stylesheet" href="/datepicker/master/dist/datepicker.min.css">
<script src="/datepicker/master/dist/datepicker.min.js"></script>

<%= simple_form_for(myobj) do |f| %>
  <%= f.input :some_date, as: :string, input_html: {class: "datepicker", onchange: "this.form.submit();", autocomplete: "off"} %>
<% end %>

<script>
  $(function() {
    $(".datepicker").datepicker({format: "yyyy-mm-dd"});
  });
</script>

Это раздражаетпосле первого раза, поэтому я создал пользовательский ввод: 

# app/inputs/datepicker_input.rb
class DatepickerInput < SimpleForm::Inputs::Base
  def input(wrapper_options={})
    wrapper_options.symbolize_keys!
    wrapper_options[:input_html] ||= {class: 'datepicker', onchange: 'this.form.submit();', autocomplete: 'off'}
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)

    template.content_for(:head) do
      [
        template.stylesheet_link_tag('https://rawgit.com/fengyuanchen/datepicker/master/dist/datepicker.min.css'),
        template.javascript_include_tag('https://rawgit.com/fengyuanchen/datepicker/master/dist/datepicker.min.js')
      ].join.html_safe
    end

    js = <<JS
<script type="text/javascript">
$(function() {$(".datepicker").datepicker({format: "yyyy-mm-dd"});});
</script>
JS

    template.content_for(:javascript) { js.html_safe }
    @builder.text_field(attribute_name, merged_input_options).html_safe
  end
end

, который позволяет мне: 

<%= simple_form_for(myobj) do |f| %>
  <%= f.input :some_date, as: :my_datepicker %>
<% end %>

к сожалению, он включает JS / CSS несколько раз и не нашел достойного решениячтобы предотвратить это.

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Вот пользовательский ввод для datepicker simple_form: 

# app/inputs/datepicker_input.rb
class DatepickerInput < SimpleForm::Inputs::Base
  def input(wrapper_options={})
    wrapper_options.symbolize_keys!
    wrapper_options[:input_html] ||= {class: 'datepicker', onchange: 'this.form.submit();', autocomplete: 'off'}
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)

    unless template.instance_variable_get(:@submitted_content_for_head)
      # prevents from being inserted twice
      template.instance_variable_set(:@submitted_content_for_head, true)
      template.content_for(:head) do
        [
          template.stylesheet_link_tag('https://rawgit.com/fengyuanchen/datepicker/master/dist/datepicker.min.css'),
          template.javascript_include_tag('https://rawgit.com/fengyuanchen/datepicker/master/dist/datepicker.min.js')
        ].join.html_safe
      end
    end

    unless template.instance_variable_get(:@submitted_content_for_footer)
      # prevents from being inserted twice
      template.instance_variable_set(:@submitted_content_for_footer, true)

      js = <<JS
<script type="text/javascript">
$(function() {$(".datepicker").datepicker({format: "yyyy-mm-dd"});});
</script>
JS

      template.content_for(:javascript) { js.html_safe }
    end

    @builder.text_field(attribute_name, merged_input_options).html_safe
  end
end
0 голосов
/ 13 февраля 2019

Я бы просто переместил файлы CSS / JS, а также фрагмент JavaScript в основной шаблон, и не стал бы беспокоиться о добавлении их через пользовательский ввод.Даже скомпилируйте их в основной файл CSS и JS, чтобы избежать дополнительных вызовов при загрузке страницы.

...