0
\$\begingroup\$

I have four radio buttons and I want to display relevant contents for each of them if they are clicked. I am using knockout.js for data binding.

Is there a better way to write the if statement block?

<li class="row">
  <div class="col-3">
    <label>
      <input type="radio" data-bind="checked: print_size_radio" name="print-size" value="Standard" />Standard (Letter)</label>
  </div>
  <div class="col-2" data-bind="visible:print_size_standard">
    <label>No. of Copies
      <input type="text" data-bind="value:print_size_standard_q, valueUpdate:'keyup'" />
    </label>
  </div>
</li>
<li class="row">
  <div class="col-3">
    <label>
      <input type="radio" data-bind="checked: print_size_radio" name="print-size" value="13 x 19" />13" x 19"</label>
  </div>
  <div class="col-2" data-bind="visible:print_size_13_19">
    <label>No. of Copies
      <input type="text" data-bind="value:print_size_13_19_q, valueUpdate:'keyup'" />
    </label>
  </div>
</li>
<li></li>
<li class="row">
  <div class="col-3">
    <label>
      <input type="radio" data-bind="checked: print_size_radio" name="print-size" value="Contact Sheet">Contact Sheet</label>
  </div>
  <div class="col-2" data-bind="visible:print_size_contact">
    <label>No. of Images/Page
      <input type="text" data-bind="value:print_size_contact_q, valueUpdate:'keyup'" />
    </label>
  </div>
</li>
<li class="row">
  <div class="col-3">
    <label>
      <input type="radio" data-bind="checked: print_size_radio" name="print-size" value="Custom Size" />Custom Size</label>
  </div>
  <div class="col-9" data-bind="visible:print_size_custom">
    <div class="row">
      <div class="col-2">
        <label>Width
          <input type="text" data-bind="value:print_size_custom_w, valueUpdate:'keyup'" />
        </label>
      </div>
      <div class="col-2 col-offset-1">
        <label>Height
          <input type="text" data-bind="value:print_size_custom_h, valueUpdate:'keyup'" />
        </label>
      </div>
      <div class="col-2 col-offset-1">
        <label>Pixels/Inches
          <select data-bind="options: print_size_custom_units, value: print_size_custom_sel"></select>
        </label>
      </div>
      <div class="col-2 col-offset-1">
        <label>No. of Copies
          <input type="text" data-bind="value:print_size_custom_q, valueUpdate:'keyup'" />
        </label>
      </div>
    </div>
  </div>
</li>

self.print_size_radio.subscribe(function(p) {
  if (p == 'Standard') {
    self.print_size_standard(true);
    self.print_size_13_19(false);
    self.print_size_contact(false);
    self.print_size_custom(false);
  } else if (p == '13 x 19') {
    self.print_size_standard(false);
    self.print_size_13_19(true);
    self.print_size_contact(false);
    self.print_size_custom(false);
  } else if (p == 'Contact Sheet') {
    self.print_size_standard(false);
    self.print_size_13_19(false);
    self.print_size_contact(true);
    self.print_size_custom(false);
  } else if (p == 'Custom Size') {
    self.print_size_standard(false);
    self.print_size_13_19(false);
    self.print_size_contact(false);
    self.print_size_custom(true);
  } else {
    self.print_size_standard(false);
    self.print_size_13_19(false);
    self.print_size_contact(false);
    self.print_size_custom(false);
  }
});
\$\endgroup\$
0

1 Answer 1

2
\$\begingroup\$

Not sure how much better it is, but some would say it could look nicer to intialize everything to false, then only change when true. Like so:

self.print_size_radio.subscribe(function(p) {

   self.print_size_standard(false);
   self.print_size_13_19(false);
   self.print_size_contact(false);
   self.print_size_custom(false);

   if (p == 'Standard') {
      self.print_size_standard(true);
   } 
   else if (p == '13 x 19') {
      self.print_size_13_19(true);
   } 
   else if (p == 'Contact Sheet') {
      self.print_size_contact(true);
   } 
   else if (p == 'Custom Size') {
      self.print_size_custom(true);
   }
});
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.