1
속성으로 전달 된 개체를 기반으로 이벤트 리스너를 초기화해야합니다.폴리머 속성이 속성 초기화를 완료하는 시점은 언제입니까?
시나리오 : 내 맞춤 요소는 구성된 다른 폴리머 요소의 이벤트를 처리해야하므로 속성으로 전달 된 params를 기반으로해야합니다.
ready(), attached() 또는 domReady() this.> 속성 이름 < 속성이 아직 속성에 바인딩되어 있지 않고 this.getAttribute (> property_name <) 예 : {{> property_bind_expression <}}은 평가 된 값이 아닙니다.
그래서 속성이 평가되고 속성에서 초기화 된 후에 요소를 초기화해야합니다. 또는 평가 된 속성을 직접 가져 오거나 원시 속성의 식 평가 메서드를 호출하여 요소 초기화를 마칩니다.
어떻게 할 수 있습니까? GitHub의에
소스 코드 : https://github.com/mmacedoeu/crud-form
demo.json :
{ "title" : "Solicitação de Crédito",
"lovs" : [ {
"id": "filter",
"formid": "crud_form",
"action": "test",
"readonly": "no",
"keypairs"
: [ ["null", ""],
["=","igual"],
["contains","contém"],
["startwith","inicia com"],
["finishwith","termina com"],
["between","entre"]
]
},
{
"id": "filter2",
"keypairs"
: [ ["=", "igual"],
[">", "maior que"],
["<", "menor que"],
["between", "entre"]
]
}
],
"values":
[
{ "label": "Cliente",
"id": "cliente",
"length": "15",
"mask": "\\d"
},
{ "label": "Tipo de Solicitação",
"id": "tiposol",
"length": "11",
"mask": "\\d",
"filter": {
"default":"finishwith",
"lov": {
"ref": "filter",
"includes":"*"
}
}
},
{ "label": "Segmento Financeiro",
"id": "segfin",
"length": "15",
"mask": "\\d",
"title": "Entre dígito verificador, um numeral!",
"filter": null
},
{ "label": "Segmento Financeiro Solicitante",
"id":"segfinsol",
"length": "4",
"mask": "\\w",
"filter": {
"default":"contains",
"lov": {
"ref": "filter",
"includes":"*"
}
}
},
{ "label": "Responsável Financeiro",
"id":"respfin",
"mask": "\\w"
}
]
}
demo.html :
<!DOCTYPE html>
<html>
<head>
<title>crud-form Demo</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link href="../paper-input/paper-input.html" rel="import">
<link href="../core-collapse/core-collapse.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">
<link href="../paper-dropdown/paper-dropdown.html" rel="import">
<link href="../paper-item/paper-item.html" rel="import">
<link href="../paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="../core-toolbar/core-toolbar.html" rel="import">
<link href="../paper-fab/paper-fab.html" rel="import">
<link href="../font-roboto/roboto.html" rel="import" >
<link href="../ajax-form/ajax-form.html" rel="import" >
<link href="../paper-button/paper-button.html" rel="import">
<link rel="import" href="../core-media-query/core-media-query.html">
<link rel="import" href="../core-ajax/core-ajax.html">
</head>
<body unresolved>
<polymer-element name="crud-form" attributes="fields wide debug">
<template>
<link rel="stylesheet" href="crud-form.css">
<template if={{debug}}>
<span>Responsive design wide form: {{wide ? 'Verdadeiro' : 'Falso'}} !</span>
<span>lovs: </span>
</template>
<template repeat="{{lov in fields.lovs}}">
<template if={{debug}}>
<span>ID: {{lov.id}}</span>
</template>
<template repeat="{{kp in lov.keypairs}}">
<template if={{debug}}>
<span>keypair: {{kp[0]}} - {{kp[1]}}</span>
</template>
</template>
</template>
<div id="searchPanel" class="search-panel {{ {wide: wide} | tokenList }}" flex vertical layout?="{{!wide}}">
<div class="card" flex?="{{!wide}}" vertical layout?="{{!wide}}">
<core-toolbar>
<span flex>{{fields.title}}</span>
<template if={{!fields.readonly}}>
<paper-button raised>Limpar</paper-button>
<paper-fab icon="add" class="yellow"></paper-fab>
</template>
</core-toolbar>
<form id={{fields.formid}} is="ajax-form" action="{{fields.action}}" method="post" class="search-content" flex>
<!-- div id="searchContent" class="search-content" flex -->
<template repeat="{{field in fields.values}}">
<section horizontal?={{debug}} layout?={{debug}}>
<template if={{debug}}>
<span>{{field.label}}:</span>
</template>
<paper-input-decorator id="{{field.id}}" label="{{field.label}}" floatingLabel>
<input is="core-input" maxlength="{{field.length}}" id="{{field.id}}"
type="{{field.type}}" min="0" title="{{field.title}}" pattern="{{field.mask}}"/>
</paper-input-decorator>
</section>
</template>
</form>
</div>
</div>
<content></content>
</template>
<script>
PolymerExpressions.prototype.property = function (input, property, value) {
return input.filter(function(item){
return item[property] === value;
});
};
Polymer('crud-form', {
wide: true,
debug: false,
fields: null,
invalid: function() {
console.log('invalid form');
},
submitting: function(event) {
console.log('submitting form');
},
submitted: function(event) {
console.log('submitted form');
},
created: function() {
console.log("created");
},
attached: function() {
console.log("attached");
},
domReady: function() {
console.log("domReady");
},
detached: function() {
console.log("detached");
},
attributeChanged: function(attrName, oldVal, newVal) {
//var newVal = this.getAttribute(attrName);
console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
},
ready: function() {
console.log("ready");
var form = this.shadowRoot.querySelector('form');
console.log(form);
var events = [ 'invalid', 'submitting', 'submitted'];
for (var event in events) {
form.addEventListener(event, this[event]);
}
console.log(this.getAttribute('fields'));
console.log(this.fields);
}
});
</script>
</polymer-element>
<polymer-element name="match-example" properties="debug">
<template>
<core-media-query query="{{query}}" queryMatches="{{wide}}"></core-media-query>
<core-ajax auto handleAs="json" url="demo.json" response="{{crud_form}}" progress="{{progress}}"
loading="{{loading}}"
></core-ajax>
<template if="{{debug}}">
<div>
<template if="{{loading}}">
Loading...
</template>
<template if="{{!loading}}">
Loaded!
</template>
</div>
</template>
<crud-form id="element" formid="crud_id" fields={{crud_form}} wide="{{wide}}" debug={{debug}}>
<template if="{{debug}}">
<span>And this is my client-provided content with {{wide}}</span>
</template>
</crud-form>
</template>
<script>
Polymer('match-example', {
query: 'min-width: 900px'
});
</script>
</polymer-element>
<p>An example of crud-form looks like this:</p>
<match-example id="me" debug=false></match-example>
</body>
</html>
이것은 이상합니다. "준비"에서 모든 속성은 값으로 채워야합니다. –
zdarksky peter가 정확합니다. 'ready' 안에는 모든 속성이 채워져 있습니다, *** 있다면 *** 요소 정의에 올바르게 정의되어 있습니다. 이 문제를 해결하는 데 필요한 코드가 필요할 것입니다. –
하나의 짧고 독립적 인 예가있을 수 있습니까? –