Skip to content

Instantly share code, notes, and snippets.

@jbolda

jbolda/index.html

Created June 4, 2015 20:09
Show Gist options
  • Save jbolda/76126b41ddf1a208cb1a to your computer and use it in GitHub Desktop.
Save jbolda/76126b41ddf1a208cb1a to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/werada
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.pinkme {
background-color: pink;
}
.yellowme {
background-color: yellow;
}
.trans-blue {
transition-property: background-color;
transition-duration: 0.5s;
background-color: blue;
}
.trans-green {
transition-property: background-color;
transition-duration: 3s;
background-color: green;
}
.trans-red {
transition-property: background-color;
transition-duration: 3s;
background-color: red;
}
.trans-del {
transition-property: background-color;
transition-duration: 1s;
background-color: black;
}
.trans-back {
transition-property: background-color;
transition-duration: 3s;
background-color: inherit;
}
</style>
</head>
<body>
<div class="panel-body">
<form data-bind="submit: onSubmit" class="pinkme">
<input data-bind="value: formtname" id="name" name="name" placeholder="what?" type="text" />
<button type="submit" >Submit</button>
</form>
<div class="row" data-bind="foreach: ticker()">
<div class="panel panel-primary col-md-3" data-bind="css: transstate">
<div class="panel-body">
<div class="row centered">
<h1><span data-bind="text: tname" ></span></h1>
</div>
<div class="row">
<button class="btn btn-danger" data-bind="click: $root.onDelete">Delete</button>
</div>
</div>
</div>
</div>
</div>
<script id="jsbin-javascript">
var tick = function (data) {
var self = this;
self.tname = ko.observable(data.tname);
self.transstate = ko.observable(data.transstate);
// observables and what not here
}; // end of tick
var tickerModel = function () {
var self = this;
self.ticker = ko.observableArray([]);
self.formtname = ko.observable("");
self.onSubmit = function (elem) {
var formentry = new tick({
tname: self.formtname()
});
self.ticker.push(formentry);
setTimeout(function () {formentry.transstate("trans-blue");}, 1);
// for example if AJAX comes back OK, settimeout to fake async
setTimeout(function() {
if (Math.random() > 0.5) {
formentry.transstate("trans-green");
} else {
formentry.transstate("trans-red");
}
}, 1000);
self.formtname("");
}.bind(this);
self.onDelete = function (tick) {
tick.transstate("trans-del");
setTimeout(function () {self.ticker.remove(tick);},1500);
};
}; // end of ticker model
ko.applyBindings(new tickerModel());
</script>
<script id="jsbin-source-css" type="text/css">.pinkme {
background-color: pink;
}
.yellowme {
background-color: yellow;
}
.trans-blue {
transition-property: background-color;
transition-duration: 0.5s;
background-color: blue;
}
.trans-green {
transition-property: background-color;
transition-duration: 3s;
background-color: green;
}
.trans-red {
transition-property: background-color;
transition-duration: 3s;
background-color: red;
}
.trans-del {
transition-property: background-color;
transition-duration: 1s;
background-color: black;
}
.trans-back {
transition-property: background-color;
transition-duration: 3s;
background-color: inherit;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var tick = function (data) {
var self = this;
self.tname = ko.observable(data.tname);
self.transstate = ko.observable(data.transstate);
// observables and what not here
}; // end of tick
var tickerModel = function () {
var self = this;
self.ticker = ko.observableArray([]);
self.formtname = ko.observable("");
self.onSubmit = function (elem) {
var formentry = new tick({
tname: self.formtname()
});
self.ticker.push(formentry);
setTimeout(function () {formentry.transstate("trans-blue");}, 1);
// for example if AJAX comes back OK, settimeout to fake async
setTimeout(function() {
if (Math.random() > 0.5) {
formentry.transstate("trans-green");
} else {
formentry.transstate("trans-red");
}
}, 1000);
self.formtname("");
}.bind(this);
self.onDelete = function (tick) {
tick.transstate("trans-del");
setTimeout(function () {self.ticker.remove(tick);},1500);
};
}; // end of ticker model
ko.applyBindings(new tickerModel());</script></body>
</html>
Raw
jsbin.werada.css
.pinkme {
background-color: pink;
}
.yellowme {
background-color: yellow;
}
.trans-blue {
transition-property: background-color;
transition-duration: 0.5s;
background-color: blue;
}
.trans-green {
transition-property: background-color;
transition-duration: 3s;
background-color: green;
}
.trans-red {
transition-property: background-color;
transition-duration: 3s;
background-color: red;
}
.trans-del {
transition-property: background-color;
transition-duration: 1s;
background-color: black;
}
.trans-back {
transition-property: background-color;
transition-duration: 3s;
background-color: inherit;
}
Raw
jsbin.werada.js
var tick = function (data) {
var self = this;
self.tname = ko.observable(data.tname);
self.transstate = ko.observable(data.transstate);
// observables and what not here
}; // end of tick
var tickerModel = function () {
var self = this;
self.ticker = ko.observableArray([]);
self.formtname = ko.observable("");
self.onSubmit = function (elem) {
var formentry = new tick({
tname: self.formtname()
});
self.ticker.push(formentry);
setTimeout(function () {formentry.transstate("trans-blue");}, 1);
// for example if AJAX comes back OK, settimeout to fake async
setTimeout(function() {
if (Math.random() > 0.5) {
formentry.transstate("trans-green");
} else {
formentry.transstate("trans-red");
}
}, 1000);
self.formtname("");
}.bind(this);
self.onDelete = function (tick) {
tick.transstate("trans-del");
setTimeout(function () {self.ticker.remove(tick);},1500);
};
}; // end of ticker model
ko.applyBindings(new tickerModel());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment