个人中心
gpt4 book ai didi

javascript - Simple Polymer 1.0数据表

转载 作者：行者123 更新时间：2023-11-30 16:17:01 25 4
gpt4 key购买 nike

我正在尝试创建一个简单的 Polymer 组件，该组件根据数据数组呈现表格。所述组件的预期用途示例如下:

<my-table data="{{someArray}}">
  <my-column header="Id"><template>{{item.id}}</template></my-column>
  <my-column header="Name"><template>{{item.name}}</template></my-column>
</my-table>

渲染应该是这样的:

enter image description here

但是，在创建半成品原型(prototype)后，事情就变得复杂了。原型(prototype)可以在这里找到:http://jsbin.com/sirutusupu/edit?html,console,output . 免责声明:除非您下载它并通过本地http-server 运行它，否则它不会工作。

我的第一个问题:为什么原型(prototype)只能通过本地http-server 工作？

我的第二个问题:在本地运行时以及当我用dom-bind 包装自定义元素时，它也会停止工作。本地代码(也不起作用):

<template is="dom-bind">
  <my-table>
    <my-column header="Id"><template>{{item.id}}</template></my-column>
    <my-column header="Name"><template>{{item.name}}</template></my-column>
  </my-table>
</template>

我的第三个问题:使用函数格式化输出不起作用。考虑这个扩展示例:

<script>
  function concat(a, b) {
    return a + "-" + b;
  }
</script>
<my-table>
  <my-column header="Id"><template>{{item.id}}</template></my-column>
  <my-column header="Name"><template>{{item.name}}</template></my-column>
  <my-column header="Computed"><template>{{concat(item.id, item.name)}}</template></my-column>
</my-table>

产生的错误是 polymer.html:1660 [undefined::_annotatedComputationEffect]: compute method 'concat' not defined。

有没有办法在不定义 Computed 绑定(bind)的情况下解决这个问题？否则单元格值的自定义格式是不可能的。

最佳答案

你这里有一个有趣的结构!

  • 我不知道为什么它在 jsbin 中对你不起作用，它可能有与 rawgit 有关，我用 polygit 代替。
  • 如果将计算函数放在模板化后列的 ctor.prototype。
  • dom.bind 会弄乱内部 template，我会避免

这个似乎有效:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>My table</title>      
  <base href="//polygit.org/components/">
  <link rel="import" href="polymer/polymer.html" >     
</head>
<body>
  <my-table>
    <my-column header="Id"><template>{{item.id}}</template></my-column>
    <my-column header="Name"><template>{{item.name}}</template></my-column>
    <my-column header="Computed"><template>{{concat(item.id, item.name)}}</template>
  </my-table>
  
  <dom-module id="my-table">
    <template>
      <table border="1">
        <tr>
          <template is="dom-repeat" items="{{columns}}" as="column">
            <th>{{column.header}}</th>
          </template>
        </tr>
        <template is="dom-repeat" items="{{items}}" as="row">
          <tr>
            <template is="dom-repeat" items="{{columns}}" as="column">
              <td>
                <my-cell column="{{column}}" row="{{row}}"></my-cell>
              </td>
            </template>
          </tr>
        </template>
      </table>
    </template>
  </dom-module>
  
  <script>
    Polymer({
      is: 'my-table',
      ready: function() {
        this.columns = Array.prototype.slice.call(Polymer.dom(this).querySelectorAll('my-column'));
        this.items = [
          {id: 1, name: 'John'},
          {id: 2, name: 'Jane'},
        ];
      }
    });

    Polymer({
      is: 'my-column',
      properties: {
        header: String
      },
      ready: function() {
        this.templatize(Polymer.dom(this).querySelector('template'));
        this.ctor.prototype.concat = function(id, name) {
          return name + '(' + id + ')';
        }
      },
      stampCell: function(row) {
        return this.stamp({item: row});
      },
      behaviors: [Polymer.Templatizer]
    });

    Polymer({
      is: 'my-cell',
      ready: function() {
        Polymer.dom(this).appendChild(this.column.stampCell(this.row).root);
      }
    });
  </script>    
</body>
</html>

关于javascript - Simple Polymer 1.0数据表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35343213/

25 4 0
文章推荐： c - 未解析的外部符号 bcrypt_gensalt
文章推荐： c - 如何在 CLion 中链接 OpenSSL
文章推荐： c - 如何读取/写入二维数组形式的二进制文件？
文章推荐： c# - Path.GetTempPath() 总是返回 %USERPROFILE%
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com