javascript - 渲染动态 Enyo 中继器

Question

我需要为我正在从事的 enyo 项目制作一个数据表，该项目最终将显示 Ajax 调用的结果。 This (公然从 ryanjduffy here 窃取)似乎是一个很好的起点，但是当我尝试从按钮事件(而不是在构造函数中)调用 setData() 时，我有 here我收到以下错误:

InvalidCharacterError: String contains an invalid character @ http://enyojs.com/enyo-2.1/enyo/source/dom/Control.js:681

我查看了 Control.js 代码，它似乎尝试创建一个新节点，但 this.tag 属性设置为 null 并且事情中断了.

我觉得我错过了一些非常简单的东西，但我只是还没有看到问题......

有人可以告诉我我做错了什么吗？

谢谢!

编辑1:

显然不需要调用 render() 。 Here is the original working version将 render() 注释掉。一切看起来都很棒。但是，如果我尝试从 version that requires a button click 中删除 render() ，中继器开始在表格上方创建 div，而不是在表格内部创建 tr td...

编辑2:

基本上，据我所知，一旦表格被渲染(或类似的东西)，表格内的中继器就会失去它的父级。结果是 Repeater 将开始在原始表格之外渲染其新项目，并且因为没有 table 的 td 标记没有任何意义，它只是渲染一个 div 。 我想出的解决方案是给 Repeater 本身一个 table 标签，这样它的子项总是会出现在正确的位置。这增加了每次都需要重新创建标题行的挑战，但这并不是什么大问题。 I have a working example如果有人感兴趣的话。

Answer 1

我确信您不再寻找解决方案，但由于帖子中提到了我，我想我应该让您知道我的想法。简而言之，我的代码不应该起作用，但由于浏览器是宽容的，所以它确实起作用了......有点。

当代码在创建时运行时，它会呈现如下内容:

<table>
  <tr> <!-- header row --> </tr>
  <div> <!-- repeater tag -->
     <tr> <!-- repeater row --> </tr>
  </div>
</table>

浏览器查看后说:“嘿，傻瓜! <div> 中没有 <table> ”，然后将其踢出，但留下 <tr> 。 s。

在您的示例中，由于您延迟了行的渲染，Enyo 渲染:

<table>
  <tr> <!-- header row --> </tr>
  <div></div>
</table>

浏览器弹出 <div>然后你就剩下一张空 table 了。当您稍后设置数据时，这些行将呈现到 div 中。不幸的是，由于您正在渲染 <tr>和<td> ，这些在表格外无效，因此您只能获取文本。

我找到了几个解决方案。最简单的是设置 tag中继器的值为 TBODY，这在表内是允许的。稍微复杂一点的解决方案是让 DataTable 继承 Repeater 并将标题行设置为 chrome，这样在更新数据时它们就不会被删除。

Option #2 Fiddle

enyo.kind({
    name:"DataTable",
    tag: "table",
    kind: "Repeater",
    published:{
        map:0,
        data:0
    },
    handlers: {
        onSetupItem: "setupItem"
    },
    components:[
        {name:"row", kind:"DataRow"}
    ],
    create:function() {
        this.inherited(arguments);
        this.mapChanged = this.dataChanged = enyo.bind(this, "refresh");

        this.refresh();
    },
    refresh:function() {
        if(this.map && this.data) {
            this.buildHeader();
            this.setCount(this.data.length);
        }
    },
    buildHeader:function() {
        if(this.$.header) {
            this.$.header.destroyClientControls();
        } else {
            this.createComponent({name:"header", tag:"tr", isChrome: true});
        }

        for(var i=0;i<this.map.length;i++) {
            this.$.header.createComponent({content:this.map[i].header, tag:"th"});
        }

        this.$.header.render();
    },
    setupItem:function(source, event) {
        for(var i=0;i<this.map.length;i++) {
            event.item.$.row.createComponent({content:this.data[event.index][this.map[i].field]});
        }

        event.item.render();

        return true;
    }
});