jquery mobile horizantal radio buttons in knock out template binding

Question

I am trying to bind jquery mobile horizantal radio buttons using knock out teplate binding.

The fielsset in template looks like

  <fieldset data-role="controlgroup" data-bind="attr: {id:QuestionID+'_fld'},template:     {name:'optionTemplate', foreach: OptionList}">
  </fieldset>

and the option template looks like

<script type="text/x-jquery-tmpl" id="optionTemplate">  
   <input type="radio"  data-bind="attr: { id:OptionID+'_radio',value:OptionID, name: QuestionID+'_rd'}, checked:$parent.OptionId" /> 
   <label data-bind="text:OptionText, attr: {id:OptionID+'_optn', for : QuestionID+'_rd' }">  </lable>
</script>

I have tried

 $('input[type=radio]').checkboxradio().trigger('create');
 $('fieldset').controlgroup().trigger('create');

Here my problem is that the mobile css is not applying to the fiedset.

Answer 1

You must do this after the template has built your page or during the page initialization event, something like this:

$(document).on('pagebeforeshow', '#pageID', function(){ 

});

Page content can be enhanced ONLY when content is safely loaded into the DOM.

Second this do NOT mix refresh functions with trigger create. Either one or the other. Trigger create is used to enhance whole content, and it should NOT be used on single elements. No point in restyling whole page every time you add new content.

Basically you only want to use:

$('input[type=radio]').checkboxradio().checkboxradio('refresh');

or if first line throws an error:

$('input[type=radio]').checkboxradio();

and:

$('fieldset').controlgroup();

But I would advise you to only use this line after everything has been appended:

$('#contentID').trigger('create');

where #contentID is an id of your div data-role="content" object. Or in case you are not using content div, only data-role="page" div then use this:

$('#pageID').trigger('pagecreate');

where #pageID is an id of your page.

To find out more about marku enhancement of dynamically added content take a look at this answer.