我创建了一个应用程序页面,它将获取属性值并显示该值。我使用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
答案 0 :(得分:2)
对于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>