dom-与 Polymer 2.0-preview 绑定

Question

我想开始将我的 Polymer 1.0 应用程序移植到 Polymer 2.0（预览版）。

我在 index.html 中使用 <template is="dom-bind"> 来支持数据绑定。 Polymer 2 也可以做到这一点吗？我试过 <dom-bind> 作为一个组件，但它没有用。

Answer 1

在 Polymer 2.0 中，确保将 <template> 包裹在 <dom-bind> 中，如 upgrade guide. It's also important to include polymer.html, which imports dom-bind.html 中所述（而不是仅 polymer-legacy.html）。

聚合物 1.0:

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

聚合物 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>

dom-与 Polymer 2.0-preview 绑定

dom-bind with Polymer 2.0-preview

binding

polymer

polymer-2.x