如何在javascript中遍历模板链

时间:2014-12-14 13:20:50

标签: javascript polymer

以下是我正在使用的示例片段。给定一组具有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)

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;

1 个答案:

答案 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>