Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
KnockoutJS Web Development

You're reading from   KnockoutJS Web Development Efficiently work with data, web templates, and custom HTML tags using KnockoutJS

Arrow left icon
Product type Paperback
Published in Feb 2015
Publisher
ISBN-13 9781782161028
Length 178 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
John Farrar John Farrar
Author Profile Icon John Farrar
John Farrar
Arrow right icon
View More author details
Toc

Select binding

Our first example of using Knockout with a select element will be for single item selection. This is the markup where we will put colors into the options:

<p>
  Colors: ( <span data-bind="text: colors"></span> )
  <br/>
  <select data-bind="options: colorOptions, 
              value: colors,
              optionsCaption: 'Choose a color'"></select>
</p>

In our code we will be doing one more special thing at this time. After we create the ViewModel we will modify one of its attributes and add another color to the colorOptions array using the push function, common to JavaScript. This means that some parts of JavaScript are great already and we should continue to use them. Here is the script code:

<script>
function MyModel(){
  this.colorOptions = ko.observableArray(['Red','Green','Blue','Yellow','Green']);
  this.colors = ko.observableArray();
};
myModel...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime