Question

我正在使用Polymer而且我很困惑何时应该使用什么类型的绑定。比方说，我有以下代码：

<body unresolved touch-action="auto">
    <my-app></my-app>
    <polymer-element name="my-app">
        <template>
            <core-drawer-panel id="drawerPanel">
                <core-header-panel drawer id="drawer" mode="seamed">
                    <core-toolbar id="navheader">
                        <span>My Site</span>
                    </core-toolbar>

                    <core-menu selected="0" selectedItem="{{selectedMenu}}">
                        <paper-item icon="home" label="One"></paper-item>
                        <paper-item icon="today" label="Two"></paper-item>
                    </core-menu>
                </core-header-panel>

                <core-header-panel main mode="seamed">

                    <core-toolbar id="mainheader">
                        <paper-icon-button id="navicon" icon="menu"></paper-icon-button>
                        <paper-icon-button id="back" icon="arrow-back"></paper-icon-button>
                        <span flex>{{selectedMenu.label}}</span>
                    </core-toolbar>
                    <div class="content">
                        Content goes here!
                    </div>
                </core-header-panel>
            </core-drawer-panel>
        </template>
        <script>
            Polymer('my-app', function(){

            });
        </script>
    </polymer-element>
</body>

过去，我在polymer-element中没有此代码，而是直接在代码中。然后我可以做类似的事情：

var navicon = document.getElementById('navicon');
var back = document.getElementById('back');
var drawerPanel = document.getElementById('drawerPanel');

navicon.addEventListener('click', function(){
    drawerPanel.togglePanel();
});
back.addEventListener('click', function(){
    window.history.back();
});

但是，我不知道如何在polymer-element内完成此操作。

此外，我曾经使用document.addEventListener('polymer-ready', function(){ ... });来确保元素在初始化之前已加载。我该如何正确地完成这一切？

Answer 1

您只需将旧的js放在聚合物元素脚本标签中即可。设置元素时会调用ready函数。

Polymer()的第二个参数需要是一个对象，而不是一个函数。

<script>
    Polymer('my-app', {
        ready: function () {
            var navicon = this.$.navicon;
            var back = this.$.back;
            var drawerPanel = this.$.drawerPanel;

            navicon.addEventListener('click', function() {
                drawerPanel.togglePanel();
            });
            back.addEventListener('click', function() {
                window.history.back();
            });
        }
    });
</script>

有关更多信息，请阅读精彩的polymer docs。

Answer 2

为了简化一些事情，你可以使用声明性事件映射：

<paper-icon-button icon="menu" on-tap="{{nav}}"></paper-icon-button>
<paper-icon-button icon="arrow-back" on-tap="{{back}}"></paper-icon-button>

然后在元素中定义一些函数属性

Polymer('my-app', {
  nav: function() {
    this.$.drawerPanel.togglePanel();
  },
  back: function() {
    window.history.back();
  }
});

Polymer添加事件监听器

2 个答案: