Polymer 1.0:从iron-ajax调用数据的iron-selector(使用template-repeat)中

使用这段代码，我可以使用变量{{selected}}和 attri -for-selected="name"在"Main Content"区域(标签模板is="dom-repeat"之外)打印选中项目的{{item.name}}。但是我想从选中的项目中打印更多的细节，而不仅仅是一个属性，在本例中是名称。

          <!-- Main Contetnt -->
          <div class="content">
          <h1>{{selected}}</h1>   *This one works fine*
          <h1>{{item.city}}</h1>   *But these two don't*
          <h1>{{item.date}}</h1>
          </div>

我想打印城市和日期以及名称打印的<标题>{{选择}}

有人知道这个问题的答案吗?PS:我的元素在代码的底部调用自己，现在它正在工作。但我将来会因此而有问题吗?

  <dom-module id="x-app">
      <template id="app">
    <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
    <paper-drawer-panel id="navDrawerPanel" responsive-width="1280px">
      <div class="nav" drawer>
        <!-- Nav Content -->
      </div>
      <paper-drawer-panel id="mainDrawerPanel" class="main-drawer-panel" main responsive-width="600px"
          drawer-width="[[_computeListWidth(_isMobile)]]" drawer-toggle-attribute="list-toggle"
          narrow="{{_isMobile}}">
        <paper-header-panel class="list-panel" drawer>
          <!-- List Toolbar -->
          <paper-toolbar>
            <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
          </paper-toolbar>
          <iron-selector selected="{{selected}}" attr-for-selected="name" id="selector">
            <template is="dom-repeat" class="list" items="{{data}}" as="item" id="tmpl">
          <div name="{{item.name}}" on-click="_listTap">
            <div class="item">
              <img class="avatar" src="{{item.image}}">
              <div class="pad">
                <div class="primary">
                  <span>{{index}}</span>
                  <span>{{item.name}}</span>
                </div>
                <div class="secondary">{{item.date}}</div>
                <div class="secondary dim">{{item.city}}</div>
              </div>
              <!-- <iron-icon icon$="{{iconForItem(item)}}"></iron-icon> -->
            </div>
            <div class="border"></div>
          </div>
        </template>
        </iron-selector>

        </paper-header-panel>
        <paper-header-panel class="content-panel" main>
          <!-- Main Toolbar -->
          <paper-toolbar>
            <paper-icon-button icon="arrow-back" list-toggle></paper-icon-button>
          </paper-toolbar>
            <!-- Main Contetnt -->
          <div class="content">
          <h1>{{selected}}</h1> 
          <h1>{{item.city}}</h1>
          <h1>{{item.date}}</h1>
          </div>

        </paper-header-panel>
      </paper-drawer-panel>
    </paper-drawer-panel>
  </template>
  <script>
    Polymer({
      is: 'x-app',
          properties: {
          },
        ready: function() {
         var drawerPanel = document.querySelector('#mainDrawerPanel');
         drawerPanel.openDrawer();
          },
      _computeListWidth: function(isMobile) {
        // when in mobile screen size, make the list be 100% width to cover the whole screen
        return isMobile ? '100%' : '33%';
      },
      _listTap: function() {
        var drawerPanel = document.querySelector('#mainDrawerPanel');
         drawerPanel.closeDrawer();
     }
    });
  </script> 

</dom-module>
<body>
    <x-app></x-app>
</body>

用selected-item代替selected。

selectedItem返回当前选中的项目(参见IronSelectableBehavior)

所以你的iron-selector应该看起来像:

<iron-selector selected-item="{{selectedItem}}" attr-for-selected="name" id="selector">

然后为div添加两个条件属性，如下所示:

<div name="{{item.name}}" city$="[[item.city]]" date$="[[item.date]]" on-click="_listTap">

然后设置一个观察者来监视selectedItem的变化:

...
observers: [ '_selectedItemChanged(selectedItem)' ],
_selectedItemChanged: function(el) {
  this.city = el.getAttribute('city');
  this.date = el.getAttribute('date');
},
...

然后你可以使用以下语句:

<div class="content">
  <h1>{{city}}</h1>
  <h1>{{date}}</h1>
</div>

相关内容

最新更新

热门标签：