2012-03-15 3 views
1

Я использую simple_form gem в rails 3.2.2 и пытаюсь настроить checboxes для ассоциации HABTM.Rails Simple_form gem и jQuery Mobile Checkboxes

Мониторинг имеет и принадлежит многим Сценарии и VICA Versa.

Используя простую форму, я могу вывести набор флажков автоматически с помощью:

= f.association :scenarios, as: :check_boxes 

Это производит следующий вывод:

<div class="checkbox"> 
    <label class="checkbox"> 
    <div class="ui-checkbox"> 
     <input class="check_boxes optional" id="monitoring_scenario_ids_1" name="monitoring[scenario_ids][]" type="checkbox" value="1"> 
     </div> 
    Haraam Meat Found</label> 
    <input name="monitoring[scenario_ids][]" type="hidden" value=""> 
</div> 

Однако JQuery Mobile только стиль и признать его, если он находится в следующем формате:

<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" /> 
<label for="checkbox-0">I agree</label> 

Кто-нибудь знает, как это сделать?

ответ

1

Изменение config.boolean_style от :nested к :inline в вашем config/initializers/simple_form.rb, как вы можете видеть в этой строке https://github.com/plataformatec/simple_form/blob/master/lib/generators/simple_form/templates/config/initializers/simple_form.rb.tt#L94-98

+0

Это работает, но не отображает его как сгруппированный флажок. Есть идеи, как это сделать? – Ammar

+0

Все коллекции_check_boxes отображаются как встроенные. Разве это не происходит? – rafaelfranca

+0

Теперь они отображаются как действительные флажки jQuery Mobile. Однако флажки не сгруппированы. Вы можете видеть, что я имею в виду на странице [docs] (http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/checkboxes/), то, что я получаю, является первым примером, и что я ищу, это флажки с вертикальной группировкой? – Ammar

0

Это немного рубить, но вы можете повторно организовать свой HTML, когда пожары pagecreate события:

//wait for the page to be created 
$(document).delegate('[data-role="page"]', 'pagecreate', function() { 

    //loop through each of the `div.checkbox` elements 
    $.each($(this).find('div.checkbox'), function (index, element) { 

     //cache the label for this `div.checkbox` element and the form inputs 
     var $label = $(this).children('label').attr('for', $(this).find('input[type="checkbox"]')[0].id), 
      $inputs = $label.find('input'); 

     //append the inputs at the same level as the label, 
     //then select the checkbox and initialize a checkbox widget 
     $label.parent().append($inputs).children('input[type="checkbox"]').checkboxradio(); 
    }); 
});​ 

Вот демо: http://jsfiddle.net/vAjDn/2/

Смежные вопросы