bindify

# Bindify-JS
git clone http://git.code.weiherhei.de/bindify.git
Log | Files | Refs

commit cdade069cdd051ae405d5f411518a6ffb83fb827
parent 0c6694a0f17d2204119af626b464af69aa60c9f7
Author: Jan Dankert <jan.dankert@hansemerkur.de>
Date:   Tue, 28 Jan 2020 17:09:57 +0100

Adding an example.

Diffstat:
example/app.css | 7+++++++
example/app.js | 39+++++++++++++++++++++++++++++++++++++++
example/index.html | 28++++++++++++++++++++++++++++
3 files changed, 74 insertions(+), 0 deletions(-)

diff --git a/example/app.css b/example/app.css @@ -0,0 +1,6 @@ +/* Very simple theming. */ + +body.theme-silver { + color: saddlebrown; + background-color: silver; +}+ \ No newline at end of file diff --git a/example/app.js b/example/app.js @@ -0,0 +1,38 @@ + +// Some sample data. +let data = { + overview: 'My first bindify data-binding example', + theme: {class: 'theme-silver'}, + names: [ 'John','Arnold' ], + person: { name: 'Arnold Schwarzenegger', fullname: function () {return "Mr./Mrs. "+data.person.name; } }, +}; + +// our own updater for informing the binding about data changes. +let updater = $.Callbacks(); + +$('html').bindify( data, + { debug: true, + prefix: 'bind', + updateModel:true, + updateDOM:true, + updateEvent: 'input', + onUpdate: function(d) { + console.log("The data has changed."); + console.log("New name in callback data: "+d.person.name); // the callback is sending the new data object + console.log("New name in data object : "+data.person.name); // Our data object has changed too + }, + updateCallback: updater + } ); + + +// Now we want to do some changes to the data model. +setTimeout( function() { + + // Ok, now we are changing the data model. + data.person.name = "Sarah Connor"; + data.names.push("Sarah"); + // for now, nothing else is happening. The DOM stays in its state. + // to update the binding we have to inform the data binding: + updater.fire(); + +},1000 );+ \ No newline at end of file diff --git a/example/index.html b/example/index.html @@ -0,0 +1,27 @@ +<html> +<head><title data-bind-text="overview"></title> + <script src="https://code.jquery.com/jquery-3.4.1.min.js" defer></script> + <script src="../bindify.js" defer></script> + <script src="app.js" defer></script> + <link rel="stylesheet" href="app.css" /> +</head> +<body data-bind-attributes="{&quot;class&quot;:&quot;theme.class&quot;}"> + +<p>This is an example for javascript data binding.</p> +<p> +<em>Try to change the following name:</em> + +Name: <input span data-bind-value="person.name" /> +</p> + +<p>The Name is <b data-bind-text="person.fullname"></b></p> + +<p> +Some Names in a list: +<ul data-bind-list="names" data-bind-var="name"> + <li data-bind-text="name"></li> +</ul> +</p> + +</body> +</html>+ \ No newline at end of file