refactorsaurusrex
7/4/2015 - 7:03 PM

How To Bind A JQueryUI SelectMenu Widget To KnockOut

How To Bind A JQueryUI SelectMenu Widget To KnockOut

selectMenu.html
content_copyfile_download
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
  <script>
    $(document).ready(function() {
      $('#colors').selectmenu({
        width: 200
      });

      var viewModel = {
        colorSelected: function(data, event) {
          this.favoriteColor(event.target.value);
        },
        favoriteColor: ko.observable('')
      };

      ko.applyBindings(viewModel);
    });
  </script>
</head>

<body>
  <h1>What! Is your favorite color?</h1>
  
  <select id="colors" data-bind="event: {selectmenuchange: colorSelected}">
    <option disabled selected>Choose one...</option>
    <option value="Red">Red</option>
    <option value="Wrong!">No, blue!</option>
  </select>

  <hr data-bind="visible: favoriteColor" style="margin-top: 50px;" />

  <p data-bind="visible: favoriteColor" style="font-size: 2em; font-weight:bold;margin-top:50px;">
    You chose: <span data-bind="text: favoriteColor"></span>
  </p>

  <img src="http://s1.postimg.org/6jzr7o1gf/bridge_Troll.jpg" data-bind="visible: favoriteColor() == 'Wrong!'" />
</body>

</html>