dom-bind与Polymer 2.0-preview

时间:2017-01-03 06:42:02

标签: binding polymer polymer-2.x

我想开始将Polymer 1.0应用程序移植到Polymer 2.0(预览版)。

我在<template is="dom-bind">中使用了index.html来支持数据绑定。聚合物2也可以吗?我尝试<dom-bind>作为组件,但它没有用。

1 个答案:

答案 0 :(得分:5)

在Polymer 2.0中,确保按upgrade guide中所述将<template>包裹在<dom-bind>内。包括polymer.html imports dom-bind.html(而不仅仅是polymer-legacy.html)也很重要。

聚合物1.0:

<template is="dom-bind" id="app">
  ...
</template>

Polymer 2.0:

<dom-bind id="app">
  <template>
    ...
  </template>
</dom-bind>

const app = document.getElementById('app');

app.message = 'Hello world!';
app.counter = 0;

app._onClick = function() {
  this.counter++;
};
<head>
  <base href="https://polygit.org/polymer+2.2.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <dom-bind id="app">
    <template>
      <div>[[message]]</div>
      <div>[[counter]]</div>
      <button on-click="_onClick">Increment</button>
    </template>
  </dom-bind>
</body>