Polymer function call but no result

Question

Old Question: How can I call a Polymer Function? (check edits, I don't want to cram code in here)

Rewrite:

I have a <core-scaffold> that I want to call the togglePanel() function. (This sits in project_root/index.html .) I do this using:

<core-icon-button onclick="document.querySelector('core-scaffold').togglePanel();"
icon="drawer></core-icon-button>

In Chrome's Inspector, I can see this causes no errors, but it doesn't do anything on-screen. My code calls this function in project_root/bower_components/core-scaffold/core-scaffold.html :

togglePanel: function() {
  this.$.drawerPanel.togglePanel();
}

Which in turn calls this function in project_root/bower_components/core-drawer-panel/core-drawer-panel.html :

togglePanel: function() {
  this.selected = this.selected === 'main' ? 'drawer' : 'main';
}

I am either to naive and unexperienced to see the problem, or have a terrible complex bug. Any help would be appreciated!

Answer 1

您可以使用查询选择器直接获取元素，并像其他HTML页面一样在onclick上调用其方法

<button onclick="document.querySelector('core-drawer-panel').togglePanel();">toggle drawer</button>

Answer 2

I ran into the problem as well. The issue is that the closeDrawer(), openDrawer(), and togglePanel() are only usable when size of your screen is less than the value of responsiveWidth.

I think the logic is that if you have the screen real estate you would always want to show the drawer. Of course this could be tweaked by extending core-drawer-panel and making a custom core-scaffold implementation.

Answer 3

Change the published attribute in core-drawer-panel.html forceNarrow=true
See @ Call function on polymer navigation drawer panel