Skip to content

Instantly share code, notes, and snippets.

@stnc

stnc/1good.html

Last active June 10, 2024 07:46
Show Gist options
  • Save stnc/33d83f93784c57c2220f59a8a872c77b to your computer and use it in GitHub Desktop.
Save stnc/33d83f93784c57c2220f59a8a872c77b to your computer and use it in GitHub Desktop.
Download ZIP
Knockout example
Raw
1good.html
<!doctype html>
<html class="no-js" lang="en-US">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.js"></script>
<!-- <script src="model.js" type="text/javascript"></script>
-->
<script>
$(document).ready(function() {
var viewModel = function() {
this.items = ko.observableArray([
{ id: 1, name: "Apple" , selected:false},
{ id: 55, name: "Orange",selected:false},
{ id: 78, name: "vegas",selected:true},
{ id: 3, name: "Banana",selected:false}
]);
};
var vm = new viewModel();
ko.applyBindings(vm);
});
</script>
</head>
<body class="jquery home page-template-default page page-id-6 page-slug-index single-author singular">
<select data-bind="foreach: items">
<option data-bind="value: id, text: name , attr: { selected : (selected == false) ? selected : '' }"></option>
</select>
</body>
</html>
Raw
2final.html
<!doctype html>
<html class="no-js" lang="en-US">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.js"></script>
<!-- <script src="model.js" type="text/javascript"></script>
-->
<script>
$(document).ready(function() {
var speakersModel = function(speakers) {
var self = this;
self.speakers = ko.observableArray(ko.utils.arrayMap(speakers, function(speaker) {
return { introduction: speaker.introduction, opinionsStatus: ko.observableArray(speaker.opinionsStatus), speaker: ko.observableArray(speaker.speakerl) };
}));
self.addSpeaker = function() {
self.speakers.push({
speaker: [
{ id: 1, name: "Apple" , selected:true},
{ id: 55, name: "Orange",selected:false},
{ id: 78, name: "Watermelon",selected:false},
{ id: 3, name: "Banana",selected:false}
],
introduction: "",
opinionsStatus: [
{ id: 1, name: "FOR" , selected:true},
{ id: 2, name: "AGAINST",selected:false}
],
});
};
self.removeSpeaker = function(speaker) {
self.speakers.remove(speaker);
};
self.save2 = function() {
self.lastSavedJson(JSON.stringify(ko.toJS(self.speakers), null, 2));
};
self.lastSavedJson = ko.observable("")
};
var initialData = [
{ introduction: "Danny",
opinionsStatus:[
{ id: 1, name: "FOR" , selected:false},
{ id: 2, name: "AGAINST",selected:true}
],
speakerl: [
{ id: 1, name: "Apple" , selected:false},
{ id: 55, name: "Orange",selected:true},
{ id: 78, name: "Watermelon",selected:false},
{ id: 3, name: "Banana",selected:false}
]
},
{ introduction: "Shane",
opinionsStatus:[
{ id: 1, name: "FOR" , selected:true},
{ id: 2, name: "AGAINST",selected:false}
],
speakerl: [
{ id: 1, name: "Apple" , selected:false},
{ id: 55, name: "Orange",selected:false},
{ id: 78, name: "Watermelon",selected:true},
{ id: 3, name: "Banana",selected:false}
]
}
];
ko.applyBindings(new speakersModel(initialData));
});
</script>
</head>
<body class="jquery home page-template-default page page-id-6 page-slug-index single-author singular">
<div id='speakersList'>
<table class='speakersEditor'>
<tr>
<th style="color:red">Select Speaker </th>
<th style="color:blue"> Introduction </th>
<th style="color:orange"> Opinions</th>
<th></th>
</tr>
<tbody data-bind="foreach: speakers">
<tr>
<td>
<select data-bind="foreach: speaker">
<option data-bind="value: id, text: name , attr: { selected : (selected == false) ? selected : '' }"></option>
</select>
</td>
<td>
<input class="form-control" id="introduction" data-bind='value: introduction' type="text">
</td>
<td>
<select data-bind="foreach: opinionsStatus">
<option data-bind="value: id, text: name , attr: { selected : (selected == false) ? selected : '' }"></option>
</select>
</td>
<td>
<a href='#' data-bind='click: $root.removeSpeaker'>Delete</a>
</td>
</tr>
</tbody>
</table>
<button id="addSpeakerEvent" data-bind='click: addSpeaker'>New Speaker Add</button>
<button style="display: block" id="SaveJson" data-bind='click: save2, enable: speakers().length > 0'>Save to
JSON</button>
<textarea name="tvsDebateMB_selectSpeakerData[]" style="display: block;" data-bind='value: lastSavedJson' rows='5'
cols='60'> </textarea>
</div>
</body>
</html>
Raw
good2_select.html
<!doctype html>
<html class="no-js" lang="en-US">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.js"></script>
<!-- <script src="model.js" type="text/javascript"></script>
-->
<script>
$(document).ready(function() {
var viewModel = function() {
this.items = ko.observableArray([
{ id: 1, name: "Apple" , select:0},
{ id: 55, name: "Orange",select:0},
{ id: 78, name: "vegas",select:0},
{ id: 3, name: "Banana",select:1}
]);
this.items2 = ko.observableArray([
{ id: 1, name: "ali" },
{ id: 55, name: "veli"},
{ id: 4, name: "ahmet"},
{ id: 3, name: "hasan"}
]);
this.selectedItemId = ko.observable(78);
this.selectedItemId2 = ko.observable(4);
this.selectedItem = function() {
var self = this;
return ko.utils.arrayFirst(this.items(), function(item) {
return self.selectedItemId() == item.id;
});
}.bind(this);
};
var vm = new viewModel();
ko.applyBindings(vm);
});
</script>
</head>
<body class="jquery home page-template-default page page-id-6 page-slug-index single-author singular">
<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedItemId"></select>
<select data-bind="options: items2, optionsText: 'name', optionsValue: 'id', value: selectedItemId2"></select>
<span data-bind="text: selectedItem().name"></span>
</body>
</html>
Raw
test1.html
<!doctype html>
<html class="no-js" lang="en-US">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.js"></script>
<!-- <script src="model.js" type="text/javascript"></script> -->
<script>
$(document).ready(function() {
var initialData = [
{ firstName: "Danny", lastName: "LaRusso", phones: [
{ type: "Mobile", number: "(555) 121-2121" },
{ type: "Home", number: "(555) 123-4567"}]
},
{ firstName: "Sensei", lastName: "Miyagi", phones: [
{ type: "Mobile", number: "(555) 444-2222" },
{ type: "Home", number: "(555) 999-1212"}]
}
];
var ContactsModel = function(contacts) {
var self = this;
self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(contact) {
return { firstName: contact.firstName, lastName: contact.lastName, phones: ko.observableArray(contact.phones) };
}));
self.addContact = function() {
self.contacts.push({
firstName: "",
lastName: "",
phones: ko.observableArray()
});
};
self.removeContact = function(contact) {
self.contacts.remove(contact);
};
self.addPhone = function(contact) {
contact.phones.push({
type: "",
number: ""
});
};
self.removePhone = function(phone) {
$.each(self.contacts(), function() { this.phones.remove(phone) })
};
self.save = function() {
self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new ContactsModel(initialData));
});
</script>
</head>
<body class="jquery home page-template-default page page-id-6 page-slug-index single-author singular">
<div class='liveExample'>
<h2>Contacts</h2>
<div id='contactsList'>
<table class='contactsEditor'>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone numbers</th>
</tr>
<tbody data-bind="foreach: contacts">
<tr>
<td>
<input data-bind='value: firstName' />
<div><a href='#' data-bind='click: $root.removeContact'>Delete</a></div>
</td>
<td><input data-bind='value: lastName' /></td>
<td>
<table>
<tbody data-bind="foreach: phones">
<tr>
<td><input data-bind='value: type' /></td>
<td><input data-bind='value: number' /></td>
<td><a href='#' data-bind='click: $root.removePhone'>Delete</a></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addPhone'>Add number</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<button data-bind='click: addContact'>Add a contact</button>
<button data-bind='click: save, enable: contacts().length > 0'>Save to JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
</div>
</body>
</html>
Raw
test2.html
<!doctype html>
<html class="no-js" lang="en-US">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.js"></script>
<!-- <script src="model.js" type="text/javascript"></script> -->
<script>
$(document).ready(function() {
var viewModel = function() {
this.items = ko.observableArray([
{ id: 1, name: "Apple" },
{ id: 55, name: "Orange"},
{ id: 3, name: "Banana"}
]);
this.selectedItemId = ko.observable(55);
this.selectedItem = function() {
var self = this;
return ko.utils.arrayFirst(this.items(), function(item) {
return self.selectedItemId() == item.id;
});
}.bind(this);
};
var vm = new viewModel();
ko.applyBindings(vm);
});
</script>
</head>
<body class="jquery home page-template-default page page-id-6 page-slug-index single-author singular">
<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedItemId"></select>
<span data-bind="text: selectedItem().name"></span>
</body>
</html>
Raw
test3.html
<!doctype html>
<html class="no-js" lang="en-US">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.js"></script>
<script src="model.js" type="text/javascript"></script>
<style>
body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }
.liveExample table, .liveExample td, .liveExample th { padding: 0.2em; border-width: 0; }
.liveExample td input { width: 13em; }
tr { vertical-align: top; }
.liveExample input.error { border: 1px solid red; background-color: #FDC; }
.liveExample label.error { display: block; color: Red; font-size: 0.8em; }
.liveExample th { font-weight: bold; }
li { list-style-type: disc; margin-left: 20px; }
</style>
<script>
$(document).ready(function() {
var viewModel = function() {
this.items = ko.observableArray([
{ id: 1, name: "Apple" },
{ id: 55, name: "Orange"},
{ id: 3, name: "Banana"}
]);
this.selectedItemId = ko.observable(55);
this.selectedItem = function() {
var self = this;
return ko.utils.arrayFirst(this.items(), function(item) {
return self.selectedItemId() == item.id;
});
}.bind(this);
};
var vm = new viewModel();
ko.applyBindings(vm);
});
var GiftModel = function(gifts) {
var self = this;
self.gifts = ko.observableArray(gifts);
self.addGift = function() {
self.gifts.push({
name:[{ id: 1, name: "Apple" }, { id: 55, name: "Orange"},{ id: 3, name: "Banana"}],
price: ""
});
};
self.removeGift = function(gift) {
self.gifts.remove(gift);
};
self.save = function(form) {
alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts));
// To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts);
};
};
var viewModel = new GiftModel([
{ name: "Tall Hat", price: "39.95"},
{ name: "Long Cloak", price: "120.00"}
]);
ko.applyBindings(viewModel);
// Activate jQuery Validation
$("form").validate({ submitHandler: viewModel.save });
</script>
</head>
<body class="jquery home page-template-default page page-id-6 page-slug-index single-author singular">
<div class='liveExample'>
<form action='/someServerSideHandler'>
<p>You have asked for <span data-bind='text: gifts().length'>&nbsp;</span> gift(s)</p>
<table data-bind='visible: gifts().length > 0'>
<thead>
<tr>
<th>Gift name</th>
<th>Price</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
<tr>
<td><select data-bind="options: name, optionsText: 'name', optionsValue: 'id', value: selectedItemId"></select>
<input class='required' data-bind='value: name' /></td>
<td><input class='required number' data-bind='value: price, uniqueName: true' /></td>
<td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
</tr>
</tbody>
</table>
<button data-bind='click: addGift'>Add Gift</button>
<button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
</form>
</div>
</body>
</html>
Raw
test4.html
<!doctype html>
<html class="no-js" lang="en-US">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.js"></script>
<!-- <script src="model.js" type="text/javascript"></script>
-->
<script>
$(document).ready(function() {
var viewModel = function() {
this.items = ko.observableArray([
{ id: 1, name: "Apple" , select:0},
{ id: 55, name: "Orange",select:0},
{ id: 78, name: "vegas",select:0},
{ id: 3, name: "Banana",select:1}
]);
this.items2 = ko.observableArray([
{ id: 1, name: "ali" },
{ id: 55, name: "veli"},
{ id: 4, name: "ahmet"},
{ id: 3, name: "hasan"}
]);
this.selectedItemId1 = ko.observable(78);
this.selectedItemId2 = ko.observable(4);
this.selectedItem = function() {
var self = this;
return ko.utils.arrayFirst(this.items(), function(item) {
return self.selectedItemId1() == item.id;
});
}.bind(this);
};
var vm = new viewModel();
ko.applyBindings(vm);
});
</script>
</head>
<body class="jquery home page-template-default page page-id-6 page-slug-index single-author singular">
<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedItemId1"></select>
<select data-bind="options: items2, optionsText: 'name', optionsValue: 'id', value: selectedItemId2"></select>
<span data-bind="text: selectedItem().name"></span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment