Skip to content

Instantly share code, notes, and snippets.

@refactorsaurusrex

refactorsaurusrex/selectMenu.html

Created July 4, 2015 19:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save refactorsaurusrex/de4f9b6e53e67b76c045 to your computer and use it in GitHub Desktop.
Save refactorsaurusrex/de4f9b6e53e67b76c045 to your computer and use it in GitHub Desktop.
Download ZIP
How To Bind A JQueryUI SelectMenu Widget To KnockOut
Raw
selectMenu.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment