Fatal编程技术网
  • javascript/
  • Javascript 在《明信片教程》中使用装订纸标签，只需稍加修改

Javascript 在《明信片教程》中使用装订纸标签，只需稍加修改

javascript polymer

Javascript 在《明信片教程》中使用装订纸标签，只需稍加修改,javascript,polymer,Javascript,Polymer,我刚刚开始使用polymer开发我的第一个web应用程序。我在polymer网站上遇到了一个教程，我想添加一些修改，以便能够更多地了解这项新技术。在尝试进入教程之后，我决定在我刚刚制作的元素周围放置一个脚手架，因此纸张选项卡和明信片列表都在脚手架的内容中。然后我尝试再次连接纸张标签和明信片，使用教程中介绍的收藏夹功能，结果没有得到响应。我还更改了纸张选项卡的标签，但没有更改“名称”属性 你能帮我看看我的代码出了什么问题吗 index.html <!doctype html> <

我刚刚开始使用polymer开发我的第一个web应用程序。我在polymer网站上遇到了一个教程，我想添加一些修改，以便能够更多地了解这项新技术。在尝试进入教程之后，我决定在我刚刚制作的元素周围放置一个脚手架，因此纸张选项卡和明信片列表都在脚手架的内容中。然后我尝试再次连接纸张标签和明信片，使用教程中介绍的收藏夹功能，结果没有得到响应。我还更改了纸张选项卡的标签，但没有更改“名称”属性

你能帮我看看我的代码出了什么问题吗

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>


取消报价
html，正文{
身高：100%；
保证金：0；
背景色：#E5；
字体系列：“RobotoDraft”，无衬线；
}
芯头面板{
身高：100%；
溢出：自动；
-webkit溢出滚动：触摸；
}
核心工具栏{
背景#03a9f4；
颜色：白色；
}
#标签{
宽度：100%；
保证金：0；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.集装箱{
宽度：80%；
保证金：50px自动；
}
@介质（最小宽度：481px）{
#标签{
宽度：200px；
}
.集装箱{
宽度：400px；
}
}
var list=document.querySelector（'post-list'）；
var tabs=document.querySelector（“纸质选项卡”）；
tabs.addEventListener（'core-select'，function（）{
list.show=tabs.selected；
});
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>


身体{
字体系列：无衬线；
}
#导航头{
背景色：#56BA89；
}
.内容{
填充：20px；
}
#核心区{
填充：10px；
背景色：rgb（255、255、255）；
}
#标签{
宽度：100%；
颜色：rgb（255、255、255）；
盒影：rgba（0,0,0,0.2）0px 3px 2px；
背景色：rgb（0188212）；
}
SSCOI项目仪表板
所有设备
延长线
印刷工
针垫
扫描器
借来
另外
聚合物({
});
post-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>


：主持人{
显示：块；
位置：相对位置；
背景色：白色；
填充：20px；
宽度：100%；
字号：1.2rem；
字体大小：300；
}
.卡头{
边缘底部：10px；
}
polyfill下一个选择器{内容：'.card header h2'；}
.卡头：：内容h2{
保证金：0；
字体大小：1.8rem；
字体大小：300；
}
polyfill下一个选择器{内容：'.card header img'；}
.card头：：内容img{
宽度：70px；
边界半径：50%；
利润率：10px；
}
核心图标按钮{
位置：绝对位置；
顶部：3px；
右：3px；
填充：#636363；
}
：主机（[favorite]）核心图标按钮{
填写：#da4336；
}
聚合物（“明信片”{
出版：{
最喜爱的：{
值：false，
反映：正确
}
},
FavoriteTaped:函数（事件、详细信息、发送方）{
this.favorite=！this.favorite；
这个。火（“最爱的水龙头”）；
}
});
post-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>


：主持人{
显示：块；
位置：相对位置；
背景色：白色；
填充：20px；
宽度：100%；
字号：1.2rem；
字体大小：300；
}
.卡头{
边缘底部：10px；
}
polyfill下一个选择器{内容：'.card header h2'；}
.卡头：：内容h2{
保证金：0；
字体大小：1.8rem；
字体大小：300；
}
polyfill下一个选择器{内容：'.card header img'；}
.card头：：内容img{
宽度：70px；
边界半径：50%；
利润率：10px；
}
核心图标按钮{
位置：绝对位置；
顶部：3px；
右：3px；
填充：#636363；
}
：主机（[favorite]）核心图标按钮{
填写：#da4336；
}
聚合物（“明信片”{
出版：{
最喜爱的：{
值：false，
反映：正确
}
},
FavoriteTaped:函数（事件、详细信息、发送方）{
this.favorite=！this.favorite；
这个。火（“最爱的水龙头”）；
}
});
请原谅代码，我只是在学习web开发，纸张标签中的标签，有最喜欢的属性名

非常感谢你。
Joseph Nicholas R.Alcantara

如果您能将代码简化为一个简单的代码，那么就更容易帮助您完成这项工作。如果您将代码复制到一个类似jsbin.com的网站中，这样回答者就可以看到您的代码，使用调试器运行它，并尝试各种解决方案，这也会有所帮助。不确定您是否仍然存在此问题。。但看起来您的sampleScaffold.html应该重命名为sample-Scaffold.html，因为您正在导入index.html。。。。您可以使用google chrome来调试类似的问题，方法是进入Inspect Element>Console，它将显示诸如不正确导入之类的问题。。。