我试图在此处重现聚合物演示所提供的“社会保险号”示例。如何为内部带有ssn-input组件的paper-input-container设置默认/初始值？运行版本在这里。
我试图将属性值同时添加到paper-input-container和ssn-input，但是它不会显示为初始默认值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Element Test Case</title>
<base href="//polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input-container.html">
<link rel="import" href="paper-input/paper-input-error.html">
<link rel="import" href="paper-input/demo/ssn-input.html">
</head>
<body>
<paper-input-container always-float-label auto-validate attr-for-value="value">
<label>Social Security Number</label>
<ssn-input class="paper-input-input"></ssn-input>
<paper-input-error>SSN invalid!</paper-input-error>
</paper-input-container>
</body>
</html>
我检查了< ssn-input >的原始实现，在我看来，没有代码将提供的值分成三个子字符串并将其提供给三个纸张输入。相反，当用户在纸张输入中键入内容时，每个字符串都变成_ssnX，并且computeValue函数将它们链接在一起，并将结果存储在value属性中。这是ssn-input.html中的代码：
properties: {
value: { notify: true, type: String },
_ssn1: { type: String },
_ssn2: { type: String },
_ssn3: { type: String },
validator: { type: String, value: 'ssn-validator' }
},
observers: [
'_computeValue(_ssn1,_ssn2,_ssn3)'
],
_computeValue: function(ssn1, ssn2, ssn3) {
this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim();
}
ssn-input是读取用户键入的内容并将所有内容放入value属性的组件。因此，首先要初始化此元素的value属性，如下所示：
<paper-input-container always-float-label auto-validate>
<label>Social Security Number</label>
<ssn-input class="paper-input-input" value="102-12-1233"></ssn-input>
<paper-input-error>SSN invalid!</paper-input-error>
</paper-input-container>
该属性值在ssn输入中初始化相关属性。ssn-input具有三个内部input元素，分别显示和接受用户输入。因此，必须在“-”字符上分割初始值。最好的方法是在value属性观察器中。因此，修改后的ssn-input元素代码如下：
Polymer({
is: 'ssn-input',
behaviors: [
Polymer.IronValidatableBehavior
],
properties: {
value: { notify: true, type: String, observer: '_handleValueChanged' },
_ssn1: { type: String },
_ssn2: { type: String },
_ssn3: { type: String },
validator: { type: String, value: 'ssn-validator' }
},
_handleValueChanged: function(value) {
var arr = value.split("-");
this._ssn1 = arr[0];
this._ssn2 = arr[1];
this._ssn3 = arr[2];
},
observers: [
'_computeValue(_ssn1,_ssn2,_ssn3)'
],
_computeValue: function(ssn1, ssn2, ssn3) {
this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim();
}
});
在这里，是jsbin运行示例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句