小编sin*_*ins的帖子

不幸的是,我发现当前的文档/示例中使用的纸张样式有点缺乏.我不是一个经验丰富的CSS人(实际上是相对新手),所以我真的可以使用如何实现Polymer 1.0应用程序范围样式的示例,以便被所​​有自定义元素使用(即通过将类应用于任何标签)那些自定义元素的本地DOM).我在Polymer 0.5中使用核心样式相对容易地做了这种事情,但它在1.0中已经改变得足以让我迷惑,特别是没有完整的文档/示例.似乎可能有几种方法可以实现这一目标.我也想知道纸张样式在1.0中是否仍然被认为是实验性的？在聚合物1.0在线元素目录(https://elements.polymer-project.org/elements/paper-styles)中没有使用文档或示例,尽管我在它的gitHub存储库中遇到了'some'.

我遇到了使用聚合物1.0的问题paper-menu-button.它的下拉菜单不会覆盖相邻iron-list元素.

我正在构建一个显示项目使用的元素,iron-list每个项目都有一个可以在该特定iron-list项目上执行的选项下拉菜单.然而,paper-menu-button的paper-menu下拉列表中没有出现对邻国的顶部iron-list的物品,只有在它自己的列表项的顶部.

我已经尝试检查Chrome中的项目,并使用z-index和溢出CSS设置无济于事.任何人都可以帮我解决我的叠加问题吗？

这是我的自定义元素的本地DOM模板的摘录(并在下面进一步查看截图):

更新: jsbin演示了这个问题:

http://jsbin.com/kuyovuh/1/edit?html,output

更新#2: 另请注意,在移动设备(Android)上的Chrome 44中,纸张菜单按钮在上述jsbin情况下根本不显示下拉列表.

<div id="projectsVertBoundary" class="layout vertical">

    <div id="projectsHorBoundary" class="layout horizontal center-center">

         <iron-list items="[[projects]]" indexAs="_id" as="projLI" class="layout flex">

             <template>

                    <div>
                        <paper-material id="itemShadow" animated elevation="1">

                            <div class="item layout horizontal" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)">

                                <paper-menu-button id="projOptionsBtn" vertical-align="top" horizontal-align="right" class="layout fixed-right">
                                    <paper-icon-button id="projOptionsButtonIcon" icon="menu" class="dropdown-trigger"></paper-icon-button>
                                    <paper-menu id="projOptionsSelMenu" class="dropdown-content">
                                        <paper-icon-item id="projEdit"> 
                                            <iron-icon icon="create"></iron-icon> Edit Project
                                        </paper-icon-item>
                                        <paper-icon-item id="projCopy">
                                            <iron-icon icon="content-copy"></iron-icon> Copy Project
                                        </paper-icon-item>
                                        <paper-icon-item id="projDelete"> …

有没有人遇到过针对单个请求两次触发的铁-ajax的响应事件？我已经仔细检查了,实际上我提交了一个请求.这是我的iron-ajax实现(只是包含iron-ajax的元素):

<dom-module id="my-ajax">

    <template>
        <iron-ajax id="ajax" auto="{{auto}}" url="{{url}}" method="{{method}}" headers="{{headers}}" body="{{body}}" handle-as="json" content-type="application/json" on-response="responseHandler" on-error="errorHandler" with-credentials></iron-ajax>
    </template>

</dom-module>

// Register the polymer element
Polymer({

    is: 'my-ajax',

    properties: {
        actionDesc: {type: String, value: ""},
        auto: {type: Boolean, value: false},
        body: {type: String, value: null},
        headers: {type: Object, value: null},
        isBusy: {
            // One-way binding setup (i.e. child to host only)
            type: Boolean,
            value: false,
            readOnly: true,
            notify: true
        },
        method: {type: String, value: null},
        user: {type: Object, value: null},
        url: {type: …

我正在尝试在我的Polymer 1.0应用程序中创建一个浮动添加按钮,其功能与Google Inbox的浮动添加按钮非常相似.第一个问题:

为了实现类似的功能,我目前正在使用paper-fab元素onmouseover和onmouseoutjs函数,如下所示:

<paper-fab id="addBtn" icon="add" class="fab red" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)"></paper-fab>

<script>

    hoverOver = function(srcElement) {
        srcElement.querySelector("paper-material").elevation = 4;
    };

    hoverOut = function(srcElement) {
        srcElement.querySelector("paper-material").elevation = 0;
    };

</script>

这是推荐的方法,还是有一种更加"聚合"的方式来实现这一目标？

我有一个自定义元素,iron-list用于显示一个对象数组.每个项目都通过模板生成,如下所示:

<iron-list id="projectList" items="[[projects]]" indexAs="_id" as="projLI" class="layout flex">
    <template>
        <div>
           <paper-material id="itemShadow" animated elevation="1">
               <div class="item layout horizontal" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)">

                   <!-- I use a paper-menu-button to display a list of available actions here -->

                   <!-- list item object content here such as: [[projLI.desc]] etc. -->

               </div>
           </paper-material>
        </div>
    </template>
</iron-list>

什么是最好的聚合物友好方法来检测铁列表项目本身的点击事件(理想情况下知道哪个项目实际上是通过点击projLI._id),还能够以paper-menu-button不同的方式处理内部点击事件？

我是一个眼球聚合物1.0的新事件听众(https://www.polymer-project.org/1.0/docs/devguide/events.html),作为一种可能的方法,试图听取不同的元素点击事件(如该页面上的示例1所示),但我不确定这是否可行.我还考虑过以iron-selector某种方式使用铁列表吗？那可行吗？我不确定它是否会起作用,因为铁选择器只有一个孩子(即铁列表元素,而不是它的模板儿童).

我觉得我错过了一个非常简单的方法来实现这一目标.有人可以给我看灯吗？

我正在寻找一种经过验证的方法来处理返回JSON的API端点的异步调用(使用聚合物最新的iron-ajax元素).这些API调用依赖于etag匹配,因此发送的etag与服务器上的etag匹配非常重要.除了在某些情况下,快速连续API调用可能会导致无序响应(因此可能导致etag不同步),我可以使用该部分.还有多个API端点(即不同的URL).因此,有时如果通过iron-ajax元素启动使用不同端点的快速连续调用,则可能会导致响应处理函数出现问题,因为响应处理程序当前检查ajax元素的URL以了解如何正确处理响应.因此,如果第二个调用在收到第一个调用响应之前覆盖了ajax组件的URL,则当第一个调用确实返回时,responseHandler不会正确处理它.也许有一种更好,更可靠的方法来确切地检查哪个呼叫已经返回？

我知道我不是第一个遇到这种情况的人,所以我想知道是否有人可以向我展示开明的道路？我认为有一个简单的策略来处理这个问题,可能实现了呼叫排队等,但我不确定iron-ajax是否有任何内置可以帮助解决这个问题.

一些示例代码的例子绝对是惊人的!