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”元素中动态创建这个元素。

这样的事情是经理如何检索数据并创建对话框（我称之为报告网格）......

  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对象进行响应array，带有标题名称列表，以及一个数据数组，即行，每行也是一个包含查询值的数组。我将该信息作为承诺传递给网格元素 - 因此它可以开始，附加等等，然后当数据到达时它被加载到标题div和铁列表中。

grid元素对实际查询一无所知，每行有多少个字段，或者确实有多少行。

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

1 个答案: