CODEWITHSUNDEEP
javascriptpolymer
user70192
user70192

Reputation: 14204

Data is not binding in Polymer app

I'm learning Polymer. In my app, I'm trying to use Page.js for routing. Oddly, when I run the app, I can't even display the route through data-binding. I've setup my app like this:

index.html

<html>
  <head>
    <title>My App</title>

    <link rel="stylesheet" href="../css/app.css">    
    <link rel="manifest" href="../manifest.json">

    <script src="../packages/webcomponentsjs/webcomponents-lite.min.js"></script>   

    <link rel="import" href="../packages/polymer/polymer.html">                
    <link rel="import" href="router.html">
  </head>
  <body>
    <template is="dom-bind" id="dialog">
      <h3>{{route}}</h3>
      <div>Test</div>
    </template>
  </body>

  <script type="text/javascript">
    window.addEventListener('WebComponentsReady', function() {
          alert(JSON.stringify(dialog));
    });
  </script>
</html>

The above code loads Polymer. I also loads the router, whose code is provided here:

router.html

<!-- Configure the application's routes -->
<script src="../packages/page/page.js"></script>
<script>
    var dialog = {};
    window.addEventListener('WebComponentsReady', function() {
        function scrollToTop(ctx, next) {
            next();
        }

        // Routes
        page('/', scrollToTop, function() {
            dialog.route = 'home';
        });     

        page('/home', scrollToTop, function() {
            dialog.route = 'home';
        });

        // 404
        page('*', function() {
            page.redirect('/');
        });     

        dialog.route = 'home';
    });
</script>

When I run the app, the word "home" does not appear in the template like I am expecting. When the alert window gets ran, I see the following displayed:

{"route":"home"}

For that reason, I do not believe the data binding is working. However, I do not understand why or how to fix it. I sincerely appreciate any help you can provide.

Thanks,

Upvotes: 0

Views: 81

Answers (1)

Neil John Ramal
Neil John Ramal

Reputation: 3734

It's not working because your dialog variable is a plain object and not a reference to your dom-bind template.

var dialog = document.getElementById('dialog');

That's the solution.

Upvotes: 1

Related Questions