Added (barely) working version of code sample for community meeting

ppig-2015/example/js/example.js

@@ -0,0 +1,65 @@
+// User A's original app
+
+fluid.defaults("examples.simpleRelay", {
+    gradeNames: "fluid.component",
+    components: {
+        celsiusHolder: {
+            type: "fluid.modelComponent",
+            options: {
+                model: {
+                    celsius: 22
+                }
+            }
+        },
+        fahrenheitHolder: {
+            type: "fluid.modelComponent",
+            options: {
+                modelRelay: {
+                    source: "{celsiusHolder}.model.celsius", // IoC reference to celsius model field in the other component
+                    target: "{that}.model.fahrenheit",       // this reference could be shortened to just "fahrenheit"
+                    singleTransform: {
+                        type: "fluid.transforms.linearScale",
+                        factor: 9/5,
+                        offset: 32
+                    }
+                }
+            }
+        }
+    }
+});
+
+// User D's view app
+fluid.defaults("examples.relayApp", {
+    gradeNames: ["gpii.templates.binder", "fluid.viewComponent", "examples.simpleRelay"],
+    model: {
+        celsius: "{celsiusHolder}.model.celsius",
+        fahrenheit: "{fahrenheitHolder}.model.fahrenheit"
+    },
+    selectors: {
+        celsius: "#celsius",
+        fahrenheit: "#fahrenheit"
+    },
+    bindings: {
+        celsius: "celsius",
+        fahrenheit: "fahrenheit"
+    }
+});
+
+// User A' designates a "decorated variety" of our simpleRelay type which will log messages on model changes
+fluid.defaults("examples.reportingRelay", {
+    distributeOptions: [{ // options distributions route options to the subcomponents in the tree compactly
+        record: {
+            funcName: "fluid.log",
+            args: ["Celsius value has changed to", "{change}.value"]
+        },
+        target: "{that celsiusHolder}.options.modelListeners.celsius"
+    }, {
+        record: {
+            funcName: "fluid.log",
+            args: ["Fahrenheit value has changed to", "{change}.value"]
+        },
+        target: "{that fahrenheitHolder}.options.modelListeners.fahrenheit"
+    }]
+});
+
+fluid.setLogging(true);

ppig-2015/example/lib/binder/binder.js

@@ -0,0 +1,69 @@
+    var gpii = fluid.registerNamespace("gpii");
+
+    fluid.defaults("gpii.templates.binder", {
+        events: {
+            onDomBind: null
+        },
+        listeners: {
+            "onCreate.bindDom": {
+                func: "{that}.events.onDomBind.fire"
+            },
+            "onDomBind.applyBinding": {
+                funcName: "gpii.templates.binder.applyBinding"
+            }
+        },
+    });
+
+    gpii.templates.binder.refreshDom = function (that) {
+        // Adapted from: https://github.com/fluid-project/infusion/blob/master/src/framework/preferences/js/Panels.js#L147
+        var userJQuery = that.container.constructor;
+        that.container = userJQuery(that.container.selector, that.container.context);
+        fluid.initDomBinder(that, that.options.selectors);
+        that.events.onDomBind.fire(that);
+    };
+
+    // The main function to create bindings between markup and model elements.  See above for usage details.
+    gpii.templates.binder.applyBinding = function (that) {
+        var bindings = that.options.bindings;
+        fluid.each(bindings, function (value, key) {
+            var path     = typeof value === "string" ? value : value.path;
+            var selector = typeof value === "string" ? key : value.selector;
+            var element = that.locate(selector);
+
+            // Update the model when the form changes
+            element.change(function () {
+                var elementValue = Number(fluid.value(element)); // TODO: botched conversion
+                fluid.log("Changing model at path " + path + " to value " + elementValue + " based on element update.");
+                that.applier.change(path, elementValue);
+            });
+
+            // Update the form elements when the model changes
+            that.applier.modelChanged.addListener(path, function (change) {
+
+                // This syntax is required until Fluid is updated per the following pull request:
+                //
+                //   https://github.com/fluid-project/infusion/pull/591
+                //
+                // For a description of a similar problem caused by the same behavior, see:
+                //
+                //   https://issues.fluidproject.org/browse/FLUID-4739
+                //
+                var value = change[path] ? change[path] : change;
+                fluid.log("Changing value at path " + path + " to " + value + " based on model update.");
+                fluid.value(element, value);
+            });
+
+            // If we have model data initially, update the form.  Model values win out over markup.
+            var initialModelValue = fluid.get(that.model, path);
+            if (initialModelValue) {
+                fluid.value(element, initialModelValue);
+            }
+            // If we have no model data, but there are defaults in the markup, using them to update the model.
+            else {
+                var initialFormValue = fluid.value(element);
+                if (initialFormValue) {
+                    that.applier.change(path, initialFormValue);
+                }
+            }
+        });
+    };