Question

我正在将聚合物与MarionetteJS一起使用，我所遇到的问题详述如下：

var ItemTemplate = `
    <paper-icon-button icon="close"></paper-icon-button>
`;

var Item = Marionette.ItemView.extend({
    tagName: "paper-icon-item",
    template: _.template(ItemTemplate),
});

从上面的代码中可以看出，我期待：

var item = new Item()
item.render();

会导致类似：

<paper-icon-item>
    <paper-icon-button icon="close"></paper-icon-button>
</paper-icon-item>

但我得到的是以下内容：

<paper-icon-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-icon-item-0">
    <div id="contentIcon" class="content-icon style-scope paper-icon-item"></div>
</paper-icon-item>

我已经确定了当元素分发它时“内容”不存在的事实。我正在寻找一种方法来在渲染模板时重新分发内容。

我试图“分发内容”：

var Item = Marionette.ItemView.extend({
    tagName: "paper-icon-item",
    template: _.template(ItemTemplate),

    onRender: function() {
        this.el.distributeContent();
    },
});

但这根本不起作用。

任何想法都将不胜感激！

Answer 1

经过一些实验后，我发现你需要使用Polymer DOM Api来操作添加的html：

var ItemTemplate = `
    <paper-icon-button icon="close"></paper-icon-button>
`;

var Item = Marionette.ItemView.extend({
    tagName: "paper-icon-item",
    template: _.template(ItemTemplate),
    // This is where the "magic" happens
    attachElContent: function(html) {
        Polymer.dom(this.el).innerHTML = html;
        return this;
    },
});

聚合物动态元素模板

1 个答案: