数据在Polymer应用程序中未绑定

Question

I'm learning Polymer . 我正在学习Polymer 。 In my app, I'm trying to use Page.js for routing. 在我的应用中，我试图使用Page.js进行路由。 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 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. 上面的代码加载了Polymer。 I also loads the router, whose code is provided here: 我还加载了路由器，其代码在此处提供：

router.html 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. 当我运行该应用程序时，单词“ home”没有出现在模板中，就像我期望的那样。 When the alert window gets ran, I see the following displayed: 当alert窗口运行时，我看到显示以下内容：

{"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, 谢谢，

Answer 1

It's not working because your dialog variable is a plain object and not a reference to your dom-bind template. 它不起作用，因为您的dialog变量是一个普通对象，而不是对dom-bind模板的引用。

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

That's the solution. 那就是解决方案。

数据在Polymer应用程序中未绑定

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-26 12:33:43

数据在Polymer应用程序中未绑定

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-26 12:33:43

解决方案1
1 已采纳 2015-10-26 12:33:43