Skip to content

Instantly share code, notes, and snippets.

@ErikSchierboom

ErikSchierboom/index.html

Created April 12, 2015 10:37
Show Gist options
  • Save ErikSchierboom/f4f1d1b63cf1742245aa to your computer and use it in GitHub Desktop.
Save ErikSchierboom/f4f1d1b63cf1742245aa to your computer and use it in GitHub Desktop.
Download ZIP
Knockout pre-rendered: foreachInit // source http://jsbin.com/nocaro
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Knockout pre-rendered: foreachInit</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<script src="https://rawgit.com/ErikSchierboom/knockout-pre-rendered/master/dist/knockout-pre-rendered.js" type="text/javascript"></script>
<style id="jsbin-css">
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>
</head>
<body>
<ul data-bind="foreachInit: persons">
<li data-template>
Name: <span data-bind="text: name"></span><br/>
Height: <span data-bind="text: height"></span>cm<br/>
Date of birth: <span data-bind="text: dateOfBirth"></span>
</li>
<li data-init>
Name: <span data-bind="textInit: name">Michael Jordan</span><br/>
Height: <span data-bind="textInit: {field: height, convert: parseInt }">198</span>cm<br/>
Date of birth: <span data-bind="textInit: { field: dateOfBirth, convert: $root.parseDate }">February 17, 1963</span>
</li>
<li data-init>
Name: <span data-bind="textInit: name">Larry Bird</span><br/>
Height: <span data-bind="textInit: {field: height, convert: parseInt }">206</span>cm<br/>
Date of birth: <span data-bind="textInit: { field: dateOfBirth, convert: $root.parseDate }">December 7, 1956</span>
</li>
<li data-init>
Name: <span data-bind="textInit: name">Magic Johnson</span><br/>
Height: <span data-bind="textInit: {field: height, convert: parseInt }">206</span>cm<br/>
Date of birth: <span data-bind="textInit: { field: dateOfBirth, convert: $root.parseDate }">August 14, 1959</span>
</li>
</ul>
<h3>Add new person</h3>
<form action="#">
<ul>
<li>
<label>Name</label>
<input type="text" data-bind="value: newName" />
</li>
<li>
<label>Height</label>
<input type="text" data-bind="value: newHeight" />cm
</li>
<li>
<label>Date of birth</label>
<input type="text" data-bind="value: newDateOfBirth" />
</li>
</ul>
<button data-bind="click: addPerson">Add person</button>
</form>
<p>View model:</p>
<pre data-bind="text: ko.toJSON(viewModel)"></pre>
</script>
<script id="jsbin-javascript">
function PersonViewModel(name, height, dateOfBirth) {
var self = this;
self.name = ko.observable(name);
self.height = ko.observable(height);
self.dateOfBirth = ko.observable(dateOfBirth);
}
function ViewModel() {
var self = this;
self.persons = ko.observableArray();
self.parseDate = function(value) {
var date = new Date(Date.parse(value));
return date.toLocaleDateString();
}
self.addPerson = function() {
var newPerson = new PersonViewModel(
self.newName(),
self.newHeight(),
self.newDateOfBirth());
self.persons.push(newPerson);
}
self.newName = ko.observable();
self.newHeight = ko.observable();
self.newDateOfBirth = ko.observable();
}
var viewModel = new ViewModel();
viewModel.persons.push(new PersonViewModel());
viewModel.persons.push(new PersonViewModel());
viewModel.persons.push(new PersonViewModel());
ko.applyBindings(viewModel);
</script>
<script id="jsbin-source-css" type="text/css">pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function PersonViewModel(name, height, dateOfBirth) {
var self = this;
self.name = ko.observable(name);
self.height = ko.observable(height);
self.dateOfBirth = ko.observable(dateOfBirth);
}
function ViewModel() {
var self = this;
self.persons = ko.observableArray();
self.parseDate = function(value) {
var date = new Date(Date.parse(value));
return date.toLocaleDateString();
}
self.addPerson = function() {
var newPerson = new PersonViewModel(
self.newName(),
self.newHeight(),
self.newDateOfBirth());
self.persons.push(newPerson);
}
self.newName = ko.observable();
self.newHeight = ko.observable();
self.newDateOfBirth = ko.observable();
}
var viewModel = new ViewModel();
viewModel.persons.push(new PersonViewModel());
viewModel.persons.push(new PersonViewModel());
viewModel.persons.push(new PersonViewModel());
ko.applyBindings(viewModel);</script></body>
</html>
Raw
jsbin.nocaro.css
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Raw
jsbin.nocaro.js
function PersonViewModel(name, height, dateOfBirth) {
var self = this;
self.name = ko.observable(name);
self.height = ko.observable(height);
self.dateOfBirth = ko.observable(dateOfBirth);
}
function ViewModel() {
var self = this;
self.persons = ko.observableArray();
self.parseDate = function(value) {
var date = new Date(Date.parse(value));
return date.toLocaleDateString();
}
self.addPerson = function() {
var newPerson = new PersonViewModel(
self.newName(),
self.newHeight(),
self.newDateOfBirth());
self.persons.push(newPerson);
}
self.newName = ko.observable();
self.newHeight = ko.observable();
self.newDateOfBirth = ko.observable();
}
var viewModel = new ViewModel();
viewModel.persons.push(new PersonViewModel());
viewModel.persons.push(new PersonViewModel());
viewModel.persons.push(new PersonViewModel());
ko.applyBindings(viewModel);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment