Marionette ItemView and radio Buttons

Question

I have data being returned from a server with a status flag. And on each ItemView I have some radio Buttons as follows:

<td><input type='radio' name='<%- id %>-typeRecipe' value='0'></td> 
<td><input type='radio' name='<%- id %>-typeRecipe' value='2'></td> 
<td><input type='radio' name='<%- id %>-typeRecipe' value='1'></td>

As each ItemView is being created I want to check if the status returned by the server is the same value as the input value ie either 0,1, or 2 and if it is set that element to selected.

Recipe = Marionette.ItemView.extend({
   ui: {
     comm: 'input[type=radio]'
},

onBeforeRender: function () {
      for (var i = 0; i < this.ui.comm.length; i++) {
        if(parseInt(this.ui.comm[i].value, 10) === this.model.get('status')) {
          this.ui.comm[i].$el.prop('selected')
        }
      }
    }

However, when I view the interface none of the radio buttons have a check in them.

When I debug the code I can see that the line this.ui.comm[i].$el.prop('selected) is being executed so I'm wondering why doesn't it display set the element to selected? BTW I tried using that function on the onRender event also but the same result

score 1 · Accepted Answer · answered Nov 03 '15 at 18:59

I disagree with your approach, instead of having a onBeforeRender function whose whole function is to check the "state" and set it to checked. I would move that "logic" to the template and not have it handled in the view.

Your template would look something like:

<td><input type='radio' name='<%- id %>-typeRecipe' <% if (status == '0') { %>checked='checked'<% } %>value='0'></td> 
<td><input type='radio' name='<%- id %>-typeRecipe' <% if (status == '2') { %>checked='checked'<% } %>value='2'></td> 
<td><input type='radio' name='<%- id %>-typeRecipe' <% if (status == '1') { %>checked='checked'<% } %>value='1'></td>

and finally your render'er?? lol. would just look something like:

this.$el.html(this.template(this.model.toJSON()));

This again is "my opinion" and you can handle it as you see fit, but i like it because that sort of mundane logic clutters the views and just leaves the person behind you reading more code than he/she has too. And ... i think this approach is more "elegant" because that loop you have going on can be avoided completely.

Cheers - I had started to out using your approach but became unstuck with the syntax. thanks for setting me on the right path again. Works a treat — Linda Keating, Nov 04 '15 at 10:29

score 0 · Answer 2 · answered Nov 03 '15 at 17:59

It is the checked property for radio inputs, not selected. Also you will want to set the second argument to true, to actually set value for that property, or you're just getting it otherwise.

$('input.selectMe').prop('checked', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='typeRecipe' value='0'>
<input type='radio' name='typeRecipe' value='2' class="selectMe">
<input type='radio' name='typeRecipe' value='1'>

Marionette ItemView and radio Buttons

2 Answers2