Skip to content

Instantly share code, notes, and snippets.

@ErikSchierboom

ErikSchierboom/index.html

Created April 12, 2015 10:37
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 ErikSchierboom/bd38fbf837f830579a11 to your computer and use it in GitHub Desktop.
Save ErikSchierboom/bd38fbf837f830579a11 to your computer and use it in GitHub Desktop.
Download ZIP
Knockout pre-rendered: valueInit // source http://jsbin.com/xuluye
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Knockout pre-rendered: valueInit</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>
<li>Name: <input data-bind="valueInit: name" type="text" value="Michael Jordan" /></li>
<li>Height: <input data-bind="valueInit: {field: height, convert: parseInt }" type="text" value="198" />cm</li>
<li>Date of birth: <input data-bind="valueInit: { field: dateOfBirth, convert: parseDate }" type="text" value="February 17, 1963" /></li>
</ul>
<p>View model:</p>
<pre data-bind="text: ko.toJSON(viewModel)"></pre>
</script>
<script id="jsbin-javascript">
function ViewModel() {
var self = this;
self.name = ko.observable();
self.height = ko.observable();
self.dateOfBirth = ko.observable();
self.parseDate = function(value) {
var date = new Date(Date.parse(value));
return date.toLocaleDateString();
}
}
var viewModel = new ViewModel();
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 ViewModel() {
var self = this;
self.name = ko.observable();
self.height = ko.observable();
self.dateOfBirth = ko.observable();
self.parseDate = function(value) {
var date = new Date(Date.parse(value));
return date.toLocaleDateString();
}
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);</script></body>
</html>
Raw
jsbin.xuluye.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.xuluye.js
function ViewModel() {
var self = this;
self.name = ko.observable();
self.height = ko.observable();
self.dateOfBirth = ko.observable();
self.parseDate = function(value) {
var date = new Date(Date.parse(value));
return date.toLocaleDateString();
}
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment