Skip to content

Instantly share code, notes, and snippets.

@yortuc

yortuc/index.html

Last active February 14, 2018 15:39
Show Gist options
  • Save yortuc/f3d3b19cb1b6bf5e32a33ea337aa0b66 to your computer and use it in GitHub Desktop.
Save yortuc/f3d3b19cb1b6bf5e32a33ea337aa0b66 to your computer and use it in GitHub Desktop.
Download ZIP
Knockout.js clone
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Observable Lib">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Observable</title>
</head>
<body>
<input type='text' bind-value='name'>
<label bind-text='name'></label>
<script id="jsbin-javascript">
function ob(val){
let lastVal = val;
let callbacks = [];
const accessor = function(setVal){
if(setVal){
lastVal = setVal;
callbacks.forEach(c=> c(setVal));
}
else {
return lastVal;
}
}
accessor.subscribe = function(callback){
callbacks.push(callback);
}
return accessor;
}
function createJsToUIBinding(observable, htmlElement, htmlElementPropToBind){
observable.subscribe(newValue =>
htmlElement[htmlElementPropToBind] = newValue);
}
function createUIToJsBinding(observable, htmlElement, uiEventToBind, htmlElementPropToBind ){
htmlElement[uiEventToBind] = () => observable(htmlElement[htmlElementPropToBind]);
}
function createValueBinding(observable, inputElement){
createJsToUIBinding(observable, inputElement, 'value');
createUIToJsBinding(observable, inputElement, 'onkeyup', 'value');
}
function createTextBinding(observable, textElement){
createJsToUIBinding(observable, textElement, 'innerText');
}
function applyBindings(model) {
// elements have binding
const els = document.querySelectorAll('[bind-value]');
createValueBinding(model['name'], els[0]);
const elsText = document.querySelectorAll('[bind-text]');
createTextBinding(model['name'], elsText[0]);
}
// ------------------------------------------------------------
const model = {
name: ob('evren')
}
applyBindings(model);
</script>
<script id="jsbin-source-javascript" type="text/javascript">function ob(val){
let lastVal = val;
let callbacks = [];
const accessor = function(setVal){
if(setVal){
lastVal = setVal;
callbacks.forEach(c=> c(setVal));
}
else {
return lastVal;
}
}
accessor.subscribe = function(callback){
callbacks.push(callback);
}
return accessor;
}
function createJsToUIBinding(observable, htmlElement, htmlElementPropToBind){
observable.subscribe(newValue =>
htmlElement[htmlElementPropToBind] = newValue);
}
function createUIToJsBinding(observable, htmlElement, uiEventToBind, htmlElementPropToBind ){
htmlElement[uiEventToBind] = () => observable(htmlElement[htmlElementPropToBind]);
}
function createValueBinding(observable, inputElement){
createJsToUIBinding(observable, inputElement, 'value');
createUIToJsBinding(observable, inputElement, 'onkeyup', 'value');
}
function createTextBinding(observable, textElement){
createJsToUIBinding(observable, textElement, 'innerText');
}
function applyBindings(model) {
// elements have binding
const els = document.querySelectorAll('[bind-value]');
createValueBinding(model['name'], els[0]);
const elsText = document.querySelectorAll('[bind-text]');
createTextBinding(model['name'], elsText[0]);
}
// ------------------------------------------------------------
const model = {
name: ob('evren')
}
applyBindings(model);
</script></body>
</html>
Raw
jsbin.xizerox.js
function ob(val){
let lastVal = val;
let callbacks = [];
const accessor = function(setVal){
if(setVal){
lastVal = setVal;
callbacks.forEach(c=> c(setVal));
}
else {
return lastVal;
}
}
accessor.subscribe = function(callback){
callbacks.push(callback);
}
return accessor;
}
function createJsToUIBinding(observable, htmlElement, htmlElementPropToBind){
observable.subscribe(newValue =>
htmlElement[htmlElementPropToBind] = newValue);
}
function createUIToJsBinding(observable, htmlElement, uiEventToBind, htmlElementPropToBind ){
htmlElement[uiEventToBind] = () => observable(htmlElement[htmlElementPropToBind]);
}
function createValueBinding(observable, inputElement){
createJsToUIBinding(observable, inputElement, 'value');
createUIToJsBinding(observable, inputElement, 'onkeyup', 'value');
}
function createTextBinding(observable, textElement){
createJsToUIBinding(observable, textElement, 'innerText');
}
function applyBindings(model) {
// elements have binding
const els = document.querySelectorAll('[bind-value]');
createValueBinding(model['name'], els[0]);
const elsText = document.querySelectorAll('[bind-text]');
createTextBinding(model['name'], elsText[0]);
}
// ------------------------------------------------------------
const model = {
name: ob('evren')
}
applyBindings(model);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment