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

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

的标准版本：

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

问题是，我希望用户能够决定输出的外观。由于聚合物不允许我们扩展现有元素，我采取了相反的方式：我创造了一种行为（错误......对不起，一个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的最佳实践吗？
有没有一种更简单的方法可以做到这一点，我没有想到？
还有什么意见吗？

一如既往地感谢您...

我不知道

我在做什么是完全相同的事情，但你可以从中汲取灵感。我创建了一个通用对话框，该对话框将在其中提供数据库查询的结果，标题为数据驱动，行大小和内容也由数据驱动。我实际上在"管理器"元素中动态创建此元素。

经理检索数据并创建对话框的方式如下（我称之为报告网格）...

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

grid 元素不知道实际查询、每行将有多少字段或实际上有多少行。

相关内容

最新更新

热门标签：