Skip to content

Instantly share code, notes, and snippets.

@sdellis

sdellis/index.html

Created September 14, 2017 16:29
Show Gist options
  • Save sdellis/819d3d8c5e730c7d5e098de6812059a8 to your computer and use it in GitHub Desktop.
Save sdellis/819d3d8c5e730c7d5e098de6812059a8 to your computer and use it in GitHub Desktop.
Download ZIP
Bind demo // source https://jsbin.com/remutu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bind demo</title>
<script src="https://cdn.rawgit.com/remy/bind/928c52ce335d6fd2c824b536a97efa460554b9e0/dist/bind.min.js"></script>
<style id="jsbin-css">
*, input {
font-family: sans-serif;
font-size: 16px;
padding: 2px;
}
</style>
</head>
<body>
<p>Score: <span class="score">0</span></p>
<p>Username: <input name="username"></p>
<script id="jsbin-javascript">
var user = Bind({
name: '[new user]',
game: { score: 0 }
}, {
'game.score': 'span.score',
name: 'input[name="username"]'
})
// in the game
user.game.score += 25;
setInterval(function () {
console.clear()
console.log(user.name)
}, 500);
</script>
<script id="jsbin-source-css" type="text/css">*, input {
font-family: sans-serif;
font-size: 16px;
padding: 2px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var user = Bind({
name: '[new user]',
game: { score: 0 }
}, {
'game.score': 'span.score',
name: 'input[name="username"]'
})
// in the game
user.game.score += 25;
setInterval(function () {
console.clear()
console.log(user.name)
}, 500);</script></body>
</html>
Raw
jsbin.remutu.css
*, input {
font-family: sans-serif;
font-size: 16px;
padding: 2px;
}
Raw
jsbin.remutu.js
var user = Bind({
name: '[new user]',
game: { score: 0 }
}, {
'game.score': 'span.score',
name: 'input[name="username"]'
})
// in the game
user.game.score += 25;
setInterval(function () {
console.clear()
console.log(user.name)
}, 500);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment