聚合物工作流程与体系结构

Question

我想问问大家关于聚合物的工作流程。我知道我应该使用我自己的元素，或者重复检查我需要的元素是否已经发布。这真的很好，我承认。然而，聚合物初学者工具包作为单页应用程序。这是使用聚合物的推荐方法吗？那么，需要大量数据才能加载的大页面又如何呢？是否有其他办法？

Answer 1

不需要同时呈现所有元素。它们只能在需要的时候才能被创造出来，也可以被摧毁。

要动态创建元素，可以使用DOM操作方法，如：

var myElement = document.createElement("my-element");
this.$.container.appendChild(myElement);
myElement.myProperty = "anything";

要删除，只需这样做：

var myElement = this.$.container.querySelector("my-element");
myElement.parentNode.removeChild(myElement);

如果需要动态加载HTML，则如果代码位于聚合物元素中(而且应该是)，则可以使用this.importHref。

this.importHref('myElement.html', function(e) {
    // Create your element here
});

把东西放在一起..。

假设你有这样的聚合物元素：

<dom-module id="my-app">
    <template>
        <div id="container"></div>
        <paper-button on-click="_loadElement">Load Element</paper-button>
        <paper-button on-click="_removeElement">Remove Element</paper-button>
    </template>
</dom-module>

<script>
    Polymer({
        is: 'my-app',
        _loadElement: function() {
            this.importHref('myElement.html', function(e) {
                var myElement = document.createElement("my-element");
                this.$.container.appendChild(myElement);
                myElement.myProperty = "anything";
            });
        },
        _removeElement: function() {
            var myElement = this.$.container.querySelector("my-element");
            myElement.parentNode.removeChild(myElement);
        }
    });
</script>