0
다음은 내가 작업하고있는 내용의 예입니다. Phone의 하위 배열에 Contact 데이터 배열이 있고 Polymer가 <template repeat='{{c,idx in contacts}}'>이고 중첩 된 숫자가 <template repeat='{{p,idx in c.phones}}'> 인 경우 선택한 전화의 인덱스와 포함 된 연락처의 인덱스를 가져와야합니다.자바 스크립트에서 템플릿 체인을 통과하는 방법
Eric Bidelman은 sender.templateInstance.model.idx을 사용하여 선택한 모델의 idx를 쉽게 얻을 수있는 방법을 보여주었습니다. idx가 노출되어 있지만 이제는 보낸 사람 부모 템플릿 templateInstance를 얻기 위해 템플릿 체인을 트래버스 할 수 있는지 확인하려고합니다. .model.idx
는
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test polymer</title>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="contact-list">
<template>
<style>
:host {
display: block; }
.liveExample {
padding: 1em;
background-color: #EEEEDD;
border: 1px solid #CCC;
max-width: 655px; }
.liveExample input {
font-family: Arial; }
.liveExample b {
font-weight: bold; }
.liveExample p {
margin-top: 0.9em;
margin-bottom: 0.9em; }
.liveExample select[multiple] {
width: 100%;
height: 8em; }
.liveExample h2 {
margin-top: 0.4em;
font-weight: bold;
font-size: 1.2em; }
.liveExample TR {
vertical-align: top; }
.liveExample TABLE, .liveExample TD, .liveExample TH {
padding: 0.2em;
border-width: 0;
margin: 0; }
.liveExample TD A {
font-size: 0.8em;
text-decoration: none; }
.liveExample table.contactsEditor > tbody > TR {
border-bottom: 1px solid silver; }
.liveExample td input {
width: 8em; }
li {
list-style-type: disc;
margin-left: 20px; }
/*# sourceMappingURL=contact-list.css.map */
</style>
<div class='liveExample'>
<h2>Contacts</h2>
<div id='contactsList'>
<table class='contactsEditor'>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone numbers</th>
</tr>
<tbody>
<template repeat='{{c,idx in contacts}}'>
<tr>
<td>
<input value='{{idx}}' />
<input value='{{c.firstName}}' />
<div><a href='javascript:;' on-tap='{{removeContact}}' >Delete</a></div>
</td>
<td><input value='{{c.lastName}}' /></td>
<td>
<table>
<tbody>
<template repeat='{{p,idx in c.phones}}'>
<tr>
<td><input value='{{p.type}}' /></td>
<td><input value='{{p.number}}' /></td>
<td><a href='#' on-tap='{{removePhone}}'>Delete</a></td>
</tr>
</template>
</tbody>
</table>
<a href='#' on-tap='{{addPhone}}'>Add number</a>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<p>
<button on-tap='{{addContact}}'>Add a contact</button>
<button on-tap='{{save, enable: contacts().length > 0'}>Save to JSON</button>
</p>
<textarea value='lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
</div>
</template>
<script>
Polymer({
ready: function(){
console.log("polymer ready");
this.contacts = [
{ firstName: "Danny", lastName: "LaRusso", phones: [
{ type: "Mobile", number: "(555) 121-2121" },
{ type: "Home", number: "(555) 123-4567"}]
},
{ firstName: "Sensei", lastName: "Miyagi", phones: [
{ type: "Mobile", number: "(555) 444-2222" },
{ type: "Home", number: "(555) 999-1212"}]
}
];
},
addContact: function(e, detail, sender){
},
addPhone: function(e, detail, sender){
},
removeContact: function(e, detail, sender){
var contactIdx = parseInt(sender.templateInstance.model.idx)
this.contacts.splice(contactIdx,1);
},
removePhone: function(e, detail, sender){
//Doesnt work, need to get contact idx which is senders parent
//template
var contactIdx = parseInt(sender.templateInstance.parent.model.c.idx)
var phoneIdx = parseInt(sender.templateInstance.model.idx)
this.contacts[contactIdx].splice(phoneidx,1);
}
});
</script>
</polymer-element>
</head>
<contact-list></contact-list>
</html>
나는 폴리머에 익숙하지 않은,하지만 그것은 단지에서처럼 전화 템플릿 내에서 {{IDX}}에 대한 입력을 추가하는 것이 가장 간단한 방법처럼 나에게 보인다 연락처 템플릿 이것은'removePhone'이'removeContact'와 같은 방식으로 적당한 접촉을 얻을 수있게합니다. – 76484
아, 코드가 전화 번호에 대한 idx를 가져야했는데 실수였습니다. 그러나 그것은 문제를 해결하지 못합니다. 나는 전화 번호에 대한 idx를 얻을 수 있지만 그때 나는 idx를 얻을 수 없다. removePhone 함수를 살펴보면 idx를 전화로 반환한다고 가정하면 idx를 동시에 가져올 수있는 방법이 없다는 것을 알 수 있습니다. – dan
나는 전화의 idx가 아니라 전화 모델에 연락처의 idx를 붙일 생각이었다. 그런 다음 idx를 사용하여 올바른 연락처를 가져오고 해당 연락처의 전화를 필터링하여 삭제 된 전화 기록을 제거합니다. – 76484