将纸张标签与卡片后教程绑定，几乎没有修改

时间：2014-07-11 06:21:01

标签： javascript polymer

我刚开始使用聚合物进行第一次Web应用程序开发。我在聚合物网站上遇到了一个教程，我想添加一些修改，以便能够更多地了解这项新技术。在尝试进入教程之后，我决定在我刚制作的元素周围放置一个脚手架，因此纸张标签和明信片列表都在脚手架的内容中。然后我尝试使用本教程介绍的收藏夹功能再次连接纸张标签和明信片，事实证明，我没有回应。我也更改了纸张标签的标签，但我保持名称属性不变。

你能帮我解决一下我的代码出了什么问题吗？

的index.html 

<!doctype html>
<html>

<head>
  <title>unquote</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <script src="../components/platform/platform.js"></script>
  <link rel="import" href="../components/font-roboto/roboto.html">
  <link rel="import"
    href="../components/core-header-panel/core-header-panel.html">
  <link rel="import"
    href="../components/core-toolbar/core-toolbar.html">
  <link rel="import"
    href="../components/paper-tabs/paper-tabs.html">
  <link rel="import" href="sample-Scaffold.html">
  <style>
  html,body {
    height: 100%;
    margin: 0;
    background-color: #E5E5E5;
    font-family: 'RobotoDraft', sans-serif;
  }
  core-header-panel {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch; 
  }
  core-toolbar {
    background: #03a9f4;
    color: white;
  }
  #tabs {
    width: 100%;
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .container {
    width: 80%;
    margin: 50px auto;
  }
  @media (min-width: 481px) {
    #tabs {
      width: 200px;
    }
    .container {
      width: 400px;
    }
  }
  </style>
</head>
<body unresolved touch-action="auto">
<core-header-panel>
    <sample-scaffold>
    </sample-scaffold>
</core-header-panel>

  <script>
  var list = document.querySelector('post-list');
  var tabs = document.querySelector('paper-tabs');

  tabs.addEventListener('core-select', function() {
    list.show = tabs.selected;
    });
  </script>
</body>

</html>

sampleScaffold.html 

<link rel="import" href="/components/core-toolbar/core-toolbar.html">
<link rel="import" href="/components/core-menu/core-menu.html">
<link rel="import" href="/components/core-item/core-item.html">
<link rel="import" href="/components/core-header-panel/core-header-panel.html">
<link rel="import" href="/components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="/components/core-scaffold/core-scaffold.html">
<link rel="import" href="/components/core-input/core-input.html">
<link rel="import" href="/components/paper-item/paper-item.html">
<link rel="import" href="/components/core-icon-button/core-icon-button.html">
<link rel="import" href="../components/polymer/polymer.html">

<link rel="import" href="post-list.html">
<polymer-element name="sample-scaffold">
  <template>
    <style>
        body {
        font-family: sans-serif;
        }

        #navheader {
        background-color: #56BA89;
        }

        .content {
        padding: 20px;
        }

        #core_field {
        padding: 10px;
        background-color: rgb(255, 255, 255);
      }
      #tabs {
        width: 100%;
        color: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
        background-color: rgb(0, 188, 212);
      }
    </style>
   <core-scaffold>

      <core-header-panel navigation flex>
        <core-toolbar id="navheader">
           <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
            <core-icon icon="search" id="core_icon"></core-icon>
            <core-input placeholder="Device Name..." id="core_input" flex></core-input>
          </core-field>
        </core-toolbar>
        <core-menu>
            <paper-item label="Team Migration" icon="polymer" id="paper_item1" center horizontal layout></paper-item>
            <paper-item label="Team Customization" icon="polymer" id="paper_item2" center horizontal layout></paper-item>
            <paper-item label="Team Spectial Projects" icon="polymer" id="paper_item3" center horizontal layout></paper-item>
            <paper-item label="Team New Solutions" icon="polymer" id="paper_item4" center horizontal layout></paper-item>
            <paper-item label="Team SRT" icon="polymer" id="paper_item5" center horizontal layout></paper-item>
        </core-menu>
      </core-header-panel>
      <div id="div" tool>SSCOI ITEM DASHBOARD</div>
      <div class="content">
        <paper-tabs id="tabs" selected="all" valueattr="name" self-end>
          <paper-tab name="all">All devices</paper-tab>
          <paper-tab name="wires">Extension Wires</paper-tab>
          <paper-tab name="printers">Printers</paper-tab>
          <paper-tab name="pinpads">Pinpads</paper-tab>
          <paper-tab name="scanners">Scanners</paper-tab>
          <paper-tab name="favorites">Borrowed</paper-tab>
          <paper-tab name="other">Other</paper-tab>
        </paper-tabs>
        <section id="section1" flex relative>
          <post-list show="all"></post-list>
        </section>
      </div>
</core-scaffold>
  </template>
  <script>
  Polymer({
  });
  </script>
</polymer-element>

-card.html交

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-icon-button/core-icon-button.html">

<polymer-element name="post-card">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
      background-color: white;
      padding: 20px;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 300;
    }
    .card-header {
      margin-bottom: 10px;
    }
    polyfill-next-selector { content: '.card-header h2'; }
    .card-header ::content h2 {
      margin: 0;
      font-size: 1.8rem;
      font-weight: 300;
    }
    polyfill-next-selector { content: '.card-header img'; }
    .card-header ::content img {
      width: 70px;
      border-radius: 50%;
      margin: 10px;
    }
    core-icon-button {
      position: absolute;
      top: 3px;
      right: 3px;
      fill: #636363;
    }
    :host([favorite]) core-icon-button {
      fill: #da4336;
    }
    </style>
    <div class="card-header" layout horizontal center>
      <content select="img"></content>
      <content select="h2"></content>
    </div>
    <core-icon-button
      id="favicon"
      icon="favorite"
      on-tap="{{favoriteTapped}}"></core-icon-button>
    <content></content>
  </template>
  <script>
  Polymer('post-card', {
    publish: {
      favorite: {
        value: false,
        reflect: true
      }
    },
    favoriteTapped: function(event, detail, sender) {
      this.favorite = !this.favorite;
      this.fire('favorite-tap');
    }
  });
  </script>
</polymer-element>

-list.html交

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-icon-button/core-icon-button.html">

<polymer-element name="post-card">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
      background-color: white;
      padding: 20px;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 300;
    }
    .card-header {
      margin-bottom: 10px;
    }
    polyfill-next-selector { content: '.card-header h2'; }
    .card-header ::content h2 {
      margin: 0;
      font-size: 1.8rem;
      font-weight: 300;
    }
    polyfill-next-selector { content: '.card-header img'; }
    .card-header ::content img {
      width: 70px;
      border-radius: 50%;
      margin: 10px;
    }
    core-icon-button {
      position: absolute;
      top: 3px;
      right: 3px;
      fill: #636363;
    }
    :host([favorite]) core-icon-button {
      fill: #da4336;
    }
    </style>
    <div class="card-header" layout horizontal center>
      <content select="img"></content>
      <content select="h2"></content>
    </div>
    <core-icon-button
      id="favicon"
      icon="favorite"
      on-tap="{{favoriteTapped}}"></core-icon-button>
    <content></content>
  </template>
  <script>
  Polymer('post-card', {
    publish: {
      favorite: {
        value: false,
        reflect: true
      }
    },
    favoriteTapped: function(event, detail, sender) {
      this.favorite = !this.favorite;
      this.fire('favorite-tap');
    }
  });
  </script>
</polymer-element>

请原谅代码，我只是学习网页开发，纸质标签中的标签，有最喜欢的属性名称。

非常感谢你。 Joseph Nicholas R. Alcantara

0 个答案:

没有答案
相关问题
最新问题