JSFiddle - React, Tailwind, and code Playground
by Sean Cannon
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div data-bind="module: { name: 'ViewModel1'}">
<input data-bind="value:favoriteSong" />
<input data-bind="value:favoriteFood" />
<input data-bind="value:favoriteFood" />
<select multiple data-bind="options : allFavoritesKO"></select>
</div>
CSS
select {
display : block;
width : 100%;
height : 200px;
}
JavaScript
Object.prototype.get = function (prop) {
switch (typeof this[prop]) {
case 'undefined':
return 'foo';
break;
case 'function':
return this[prop];
break;
default:
return this[prop];
break;
}
};
Object.prototype.set = function (prop, val) {
switch (typeof this[prop]) {
case 'undefined':
break;
case 'function':
this[prop];
break;
default:
this[prop] = val;
break;
}
return this;
};
Object.prototype._getAll = function () {
var _props = [];
var self = this;
Object.keys(self).forEach(function (key, index, array) {
if (key.indexOf('_') !== 0) {
if (self.hasOwnProperty(key)) {
_props.push(self[key]);
}
}
});
return _props;
};
var Favorites = {
song : ko.observable('These Walls'),
game : 'GTA5',
food : ko.observable('pizza'),
shows : ko.observableArray(['Family Guy', 'Knight Rider']),
movies : ['Bloodsport', 'The Notebook']
};
var ViewModel1 = function () {
this.favoriteSong = Favorites.get('song');
this.favoriteFood = Favorites.get('food');
this.favoriteGame = Favorites.get('game');
this.favoriteShows = Favorites.get('shows');
this.favoriteMovies = Favorites.get('movies');
this.allFavoritesKO = ko.observableArray(Favorites._getAll.apply(Favorites));
return this;
};
ko.applyBindings(new ViewModel1());