小编Ara*_*ind的帖子

通过更改底层数组动态更新dom-repeat模板

如果底层数组得到更新,是否有Polymer dom api方法或其他方法自动更新带有其他元素的重复模板?

我有一个动态数组,可以通过ajax调用重复更新.此数组不断更改其长度(根据ajax响应逐步追加或删除元素).数组通过文档反映出来<template is="dom-repeat">.有没有办法在底层数组更新时自动更新dom?

目前,我能看到的唯一方法是

  1. 识别增量更新并手动添加或删除节点.
  2. 删除整个重复模板容器并重新放大新模板.无论如何我也不知道动态标记新模板.这可能吗?我可以想到实现这一点的另一种方法是使另一个自定义元素重复模板标记,每当有数组更新时,删除当前元素,通过将更新的数组传递给元素来追加新元素.

通过使用2,我将无法使用视图中自动更新列表的过渡效果.我希望能够使用这些效果.

javascript dom polymer polymer-1.0

11
推荐指数
1
解决办法
7081
查看次数

无法使用Custom CSS Mixins在Polymer 1.0中设置纸质抽屉面板的样式

我正在尝试使用此处提到的Custom CSS Mixins来设置纸质抽屉面板的样式.paper-drawer-panel.css文件适用

@apply(--paper-drawer-panel-left-drawer-container);
@apply(--paper-drawer-panel-main-container);
Run Code Online (Sandbox Code Playgroud)

分别用于抽屉和主容器.但是,使用mixins设置的样式似乎不起作用
下面是我使用过的纸质抽屉面板演示的代码.

<html>
      <head>
        <title>paper-drawer-panel demo</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

        <link rel="import" href="bower_components/paper-styles/paper-styles.html">
        <link rel="stylesheet" href="bower_components/paper-styles/demo.css">

        <link rel="import" href="bower_components/paper-button/paper-button.html">
        <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">

        <style>
        #drawerPanel {
        --paper-drawer-panel-left-drawer-container: {
          background-color: #eee;
        };
        --paper-drawer-panel-main-container: {
          background-color: gray;
        };
      }
        </style>
      </head>

      <body class="unresolved fullbleed">

        <paper-drawer-panel id="drawerPanel">
        <div drawer> 
            <div>Drawer content... </div>
        </div>
        <div main>
            <div>
              <paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
            </div>
          </div>
        </paper-drawer-panel>
      </body>
</html>
Run Code Online (Sandbox Code Playgroud)

https://elements.polymer-project.org/elements/paper-drawer-panel上的文档说明这也是有效的.

造型纸抽屉面板: …

css mixins polymer

4
推荐指数
1
解决办法
2775
查看次数

动态添加和删除事件监听器

我使用以下命令向自定义元素中的 div 添加了一个点击侦听器

var nicediv = document.getElementById('nicediv');
nicediv.addEventListener('tap',this.listenerfunc.bind(this),false);
Run Code Online (Sandbox Code Playgroud)

这是成功的,但我无法删除事件侦听器。这不起作用。

nicediv.removeEventListener('tap',this.listenerfunc);
Run Code Online (Sandbox Code Playgroud)

有什么想法吗?

javascript polymer polymer-1.0

3
推荐指数
1
解决办法
4068
查看次数

标签 统计

polymer ×3

javascript ×2

polymer-1.0 ×2

css ×1

dom ×1

mixins ×1