聚合物数据绑定在应用程序页面中不起作用答案

【问题标题】：Polymer Data binding not working in application page聚合物数据绑定在应用程序页面中不起作用
【发布时间】：2016-12-01 15:55:05
【问题描述】：

我创建了一个应用程序页面，该页面将获取属性值并显示该值。我使用 Polymer 的数据绑定。但是，它不起作用：

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
      <title>demo-prep1 demo</title>
      <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel="import" href="../demo-prep1.html"/>
      <link rel="import" href="/bower_components/polymer/polymer.html">
    </head>
    <body>
      <div class="vertical-section-container centered">
        <h3>Basic demo-prep1 demo</h3>
        <demo-prep1 emp-name$="{{employeeName}}"></demo-prep1>
        Hello [[employeeName]]
        <input id="output_val" value="[[employeeName]]"></input>
      </div>
    </body>
</html>

我看到了这个结果：

我怎样才能使绑定工作？我在聚合物组件中输入的员工姓名应显示在应用程序页面中。该属性标记为notify: true

【问题讨论】：

标签： polymer

【解决方案1】：

对于 Polymer 元素之外的数据绑定，您需要使用 dom-bind 模板：

<body>
  <template is="dom-bind">
    [[propertyName]]
  </template>
</body>

另外，emp-name$="{{employeeName}}" 正在使用attribute binding（即$=），但在这种情况下，您应该使用属性绑定：

<demo-prep1 emp-name="{{employeeName}}">

HTMLImports.whenReady(() => {
  Polymer({
    is: 'demo-prep1',
    properties: {
      empName: {
        type: String,
        value: 'John Doe',
        notify: true
      }
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <template is="dom-bind">
    <div class="vertical-section-container centered">
        <h3>Basic demo-prep1 demo</h3>
        <demo-prep1 emp-name="{{employeeName}}"></demo-prep1>
        Hello [[employeeName]]
        <input id="output_val" value="[[employeeName]]"></input>
      </div>
  </template>
</body>

【讨论】：