以下是我正在使用的示例片段。给定一组具有Phones子数组的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
请参阅函数removeContact（这可以按预期工作）和removePhone（这是我需要遍历templateInstance链以获取父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>
答案 0 :(得分：0)
您可以通过一次又一次地访问.parentElement属性来遍历（直到tr节点），这有点令人毛骨悚然，但它正在运行。
<!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 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: [{
id: 0,
type: "Mobile",
number: "(555) 121-2121"
}, {
id: 1,
type: "Home",
number: "(555) 123-4567"
}]
}, {
firstName: "Sensei",
lastName: "Miyagi",
phones: [{
id: 2,
type: "Mobile",
number: "(555) 444-2222"
}, {
id: 3,
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.parentElement.parentElement.templateInstance.model.idx);
var phoneId = parseInt(sender.templateInstance.model.p.id);
this.contacts[contactIdx].phones = this.contacts[contactIdx].phones.filter(function(phone) {
return phone.id != phoneId;
});
}
});
</script>
</polymer-element>
</head>
<contact-list></contact-list>
</html>