创建具有可配置输出的元素

Question

我正在编写一个简单的小部件，它将根据获取的数据（取自 AJAX 请求）创建输出。此版本的 my-element 是不可配置的标准版本：

http://jsbin.com/rivala/edit?html,output#H:L56

事实是，我希望用户能够决定输出的外观。由于 Polymer 不允许我们扩展现有元素，我采用了另一种方式：我创建了一个行为（错误...对不起，behavior，很难不输入 "u"每次）完成大部分工作。这是我的结果：

http://jsbin.com/yuxecu/edit?html,output

因此，为了创建一个元素，用户需要做的就是：

<dom-module id="my-element">
  <template>

    <!-- THE FOLLOWING PART IS THE ONLY THING THE USER WILL CHANGE -->
    <paper-dropdown-menu label="Your favourite category">
      <paper-menu class="dropdown-content">

        <template is="dom-repeat" items="{{_data}}">  
          <paper-item>{{item.name}}</paper-item>
        </template>

    </paper-dropdown-menu>

  </template>

  <script>
    Polymer({
      is: "my-element",
       behaviors: [ MyBehaviour],
     })
  </script>
</dom-module>

然后使用它：

我更喜欢简单一点的东西。例如，允许这样的事情会好得多：

<my-element url="http://output.jsbin.com/zonona/3.js">

  <template id="bindme">

    <!-- THE FOLLOWING PART IS THE ONLY THING THE USER WILL CHANGE -->
    <paper-dropdown-menu label="Your favourite category">
      <paper-menu class="dropdown-content">

        <template is="dom-repeat" items="{{_data}}">  
          <paper-item>{{item.name}}</paper-item>
        </template>

    </paper-dropdown-menu>
   </template>
</my-element>

但我试了又试，然后又试了一些，这似乎是不可能的，除非你真的想亲自动手。

一旦可以扩展非本地元素，我假设我可以声明性地创建一个元素来扩展 my-element 并定义一个新模板。到那时...

问题：

我的代码是否至少大致遵循了 Polymer 的最佳实践？
有没有我没想到的更简单的方法？
还有评论吗？

一如既往的感谢...

Answer 1

我不知道我做的是不是一模一样的东西，但你或许能从中得到启发。我创建了一个通用对话框，它将提供其中的数据库查询结果，标题数据驱动，行大小和内容也数据驱动。我实际上在 "manager" 元素中动态创建此元素。

管理员检索数据和创建对话框的方式与此类似（我称之为 report-grid）...

  newGrid: function(name, useId, useDates, parent) {
    var self = this;
    var body;
    // jshint unused: false
    var dataPromise = new Promise(function(accept, reject) {
      var sendOptions = {
        url: '/api/queries',
        method: 'POST',
        handleAs: 'json',
        headers: {'content-type': 'application/json'}
      };
      body = {};
      body.name = name;
      if (useId) {
        body.id = parent.id;
      }
      if (useDates) {
        body.startdate = parent.startdate;
        body.enddate = parent.enddate;
      }
      sendOptions.body = body;
      var request = document.createElement('iron-request');
      request.send(sendOptions).then(function() {
        accept(request.response);
      });
    });
    // jshint unused: true
    var x;
    var y;
    var grid = document.createElement('pas-report-grid');
    Polymer.dom(self).appendChild(grid);
    if (this.grids.length === 0) {
      x = 0;
      y = 0;
    } else {
      x = this.grids[this.grids.length - 1].x + this.deltaX;
      y = this.grids[this.grids.length - 1].y + this.deltaY;
    }
    this.grids.push(grid);
    grid.open(dataPromise,body,x,y);

然后元素本身有一大堆东西（未显示）来提供拖动和调整大小的手柄，但网格的核心是以下模板化的东西

  <div class="layout horizontal">
    <template is="dom-repeat" items="[[heading]]">
      <span class="flex">[[item]]</span>
    </template>
  </div>
  <iron-list id="grid" class="flex" items="[[data]]" as="row">
    <template>
      <div class="layout horizontal row" tabindex$="[[tabIndex]]" index="[[index]]">
        <template is="dom-repeat" items="[[row]]" as="field">
          <div class="flex field">[[field]]</div>
        </template>
      </div>
    </template>
  </iron-list>

网格的打开函数对数据进行此操作

  open: function(dataPromise, params, x, y) {
    var self = this;
    this.x = x;
    this.y = y;
    dataPromise.then(function(data) {
      self.title = data.name;
      self.heading = data.heading;
      self.data = data.data;
      self.$.griddialog.open();
    });
    this.params = params;

所以这里发生的事情是经理正在为可能需要也可能不需要 id 以及开始和结束日期的通用查询发出铁请求（也是动态创建的），服务器响应 json object 其中包含一个标题数组、一个标题名称列表和一个作为行的数据数组，每一行也是一个包含查询值的数组。我将该信息作为承诺传递给网格元素 - 这样它就可以开始、附加等等，然后当数据到达时将其加载到标题 div 和铁列表中。

网格元素对实际查询一无所知，每行将有多少个字段，或者实际上有多少行。

创建具有可配置输出的元素

Creating element with configurable output

web-component

polymer