commit cdade069cdd051ae405d5f411518a6ffb83fb827
parent 0c6694a0f17d2204119af626b464af69aa60c9f7
Author: Jan Dankert <jan.dankert@hansemerkur.de>
Date: Tue, 28 Jan 2020 17:09:57 +0100
Adding an example.
Diffstat:
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="{"class":"theme.class"}">
+
+<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