javascript - Polymer 1.0 自动装订模板

标签 javascript web-component polymer-1.0 custom-element

我正在尝试让自动绑定(bind)模板正常工作,但没有成功。这就是我到目前为止所做的。该页面不会以“greeting”的值呈现。它输出{{greeting}}。

<!doctype html>
<html lang="">
<head>

  <link rel="stylesheet" href="styles/main.css">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
   <template is="dom-bind" id="app" >
    <span>  {{greeting}} </span>
  </template>
  <script src="scripts/app.js"></script>
</body>
</html>

app.js

(function(document) {
  'use strict';
  var app = document.querySelector('#app');
  app.greeting = "Hello";

})(document);

它适用于 Polymer 0.5.5 http://plnkr.co/edit/fmL9xQEXKwnINzdL3rBj?p=preview

最佳答案

您的 {{greeting}} 绑定(bind)必须是标记 ( Polymer documentation: Binding to text content ) 的唯一内容。您需要删除周围的空白:

<template is="dom-bind" id="app" >
  <span>{{greeting}}</span>
</template>

关于javascript - Polymer 1.0 自动装订模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31093081/

相关文章:

javascript - 是否可以在页面其他部分加载后克隆图像而不加载?

javascript - 声明的 javascript 变量在 JS 函数中不起作用

javascript - 如何从 Web 组件 mixin 中删除事件监听器 --> 类型 'disconnectedCallback' 上不存在属性 'HTMLElement'

javascript - 如何在自定义 Polymer Web 元素中查询动态注入(inject)的光子元素?

javascript - 自定义 Polymer 组件之间没有通信

javascript - 当我使用 React hooks 和 React context 添加新帖子时,为什么我的状态会替换我的帖子

javascript - 按下按钮时获取 td 的序列

javascript - Web组件稳定后如何添加样式?

polymer - 在 Polymer 2 中只触发就绪生命周期回调

javascript - 以编程方式更改纸张输入类型