数据不绑定在聚合物应用程序

Data is not binding in Polymer app

本文关键字：聚合物 应用程序 绑定 数据      更新时间：2023-09-26

我正在学习聚合物。在我的应用程序中，我试图使用Page.js进行路由。奇怪的是，当我运行应用程序时，我甚至无法通过数据绑定显示路由。我已经这样设置了我的应用程序:

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>
上面的代码加载了Polymer。我还加载了路由器，其代码如下所示:

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>

当我运行应用程序时，"home"这个词没有像我期望的那样出现在模板中。当alert窗口运行时，我看到如下显示:

{"route":"home"}

由于这个原因，我不相信数据绑定正在工作。然而，我不明白为什么或如何解决它。我真诚地感谢你能提供的任何帮助。

谢谢,

它不工作，因为您的dialog变量是一个普通对象，而不是对您的dom-bind模板的引用。

var dialog = document.getElementById('dialog');
相关文章：