0

I'm using Metawidgets for javascript, and want to access and show the updated domain model if any changes were made to it, without routing back to a server (e.g.: all within the same client side javascript). Sadly, every example I could find went back to the server or plugged into a framework.

Here's an example showing my problem with getting the updated model. Change the values on the page, click on 'display' and check out the console window. Notice how it still shows the old values.

<!DOCTYPE html>
<html>
<head>
   <script src="metawidget-4.1/js/lib/metawidget/core/metawidget-core.min.js" type="text/javascript"></script>
 </head>
 <body style="font-family:Arial">
    <div id="metawidget"></div>
    <script type="text/javascript">
        var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ) );
        mw.toInspect = {
            name: 'X',
            age: 40,
            display: function(x) {
                // This never shows the updated model if the user changes values
                console.log(this);
            }
        };
        mw.buildWidgets();
    </script>
</body>
</html>

How can I get Metawidget to automatically display an updated version of the domain object if it's changed from the code? For instance, if I were to increment the age (e.g: person.age++ or this.age++ from within display), the page doesn't automatically reflect this.

R. Barzell
  • 666
  • 5
  • 24

1 Answers1

1

You're asking two questions here. I'll answer them separately.

  1. How do I get Metawidget to save the values back from the widgets into the domain object? To do this, your code should look like:

       display: function(x) {
        mw.save();
        console.log(this);
    }

  2. How do I get Metawidget to redraw the widgets with new values? To do this, your code should look like:

       display: function(x) {
        this.age++;
        mw.buildWidgets();
    }

However, I should say the way you've written this code is a bit strange. It's fine if it's just a quick example for learning purposes, but in production code you would want to decouple things.

For example, you wouldn't typically define the .toInspect inline, and have functions on it that directly reference the mw.

Richard Kennard
  • 1,325
  • 11
  • 20
  • Don't worry, it's just a quick example for learning purposes. In fact, I actually intentionally inlined the .toInspect before posting here, to keep the code as short as possible. Also, I agree on not directly referencing mw... if the point here is to use a pure domain model, adding mw forces some UI concerns, which defeats the purpose. However, I can worry about the best way to decouple now that I can understand the basic functionality. – R. Barzell Feb 26 '15 at 21:37
  • Cool. Also, I should mention `mw.buildWidgets` will, as you asked, display "an updated version of the domain model". So if your `display` method adds a new field `this.foo = 'bar'` that will appear too. If all you want to do is update the domain model *values* (i.e. all fields/types stay the same) consider using `SimpleBindingProcessor.reload` – Richard Kennard Feb 26 '15 at 23:41
  • Finally, if you're feeling so inclined, I'd welcome pull requests to my 'Metawidget JS Examples' repository: https://github.com/metawidget/metawidget-js – Richard Kennard Feb 27 '15 at 00:16