Question

很抱歉，如果这是一个愚蠢的问题，但我想弄清楚如何使用paper-toggle-button使元素在我的页面上显示/消失。

我可以通过简单地使用onclick来使其工作，但这显然不是正确/理想的我在网上找不到任何使用它的例子（用于网络）。

切换按钮已部署（不含onclick='toggleShow'()）：

<paper-toggle-button onchange={{toggleShow}} checked></paper-toggle-button>

我尝试过的脚本（失败了）是：

function toggleShow() {
  if (checked: false) {
    chart.hide('upload'); //this works with onclick
  } else {
    chart.show('upload');
  }
}

我确信这是一个愚蠢的问题，但是让我朝着正确的方向前进的任何帮助都会非常感激

Answer 1

var toggle = document.querySelector("paper-toggle-button");
toggle.addEventListener('change', function () {
  if (this.checked) {
    // do something if when checked
  } else {
    // do something if not checked
  }
});

以上代码将检查＆＃34;更改＆＃34;切换获取用户交互时触发的事件，并检查按钮的状态。

如果你打算在自定义元素中使用它，你可以将它包装在ready函数中。你会给切换一个id（在这种情况下我用来切换）所以你可以选择快速选择聚合物。

ready: function () {
  this.$.toggle.addEventListener('change', function () {
    if (this.checked) {
      // do something if when checked
    } else {
      // do something if not checked
    }
  }); 
}

编辑：没有注意到第一次发布op使用了onchange属性，因此你可以忽略关于事件监听器的部分，只使用命名函数作为OP发布。只需要纠正逻辑。

第二次编辑：这里有一个plunker，其中包含两个方法on-change属性和eventlistener的示例。 http://plnkr.co/edit/3tn3C2GpgKQY9bkzCt0L?p=preview

op在on-change上使用onchange，这可能是问题的根源。

Answer 2

我认为属性绑定是一种更惯用的方式来处理它，如下所示：

std::pair<iterator,bool> insert( const value_type& value );

template< class P >
std::pair<iterator,bool> insert( P&& value );

std::pair<iterator,bool> insert( value_type&& value );

iterator insert( iterator hint, const value_type& value );

iterator insert( const_iterator hint, const value_type& value );

template< class P >
iterator insert( const_iterator hint, P&& value );

iterator insert( const_iterator hint, value_type&& value );

template< class InputIt >
void insert( InputIt first, InputIt last );

void insert( std::initializer_list<value_type> ilist );

insert_return_type insert(node_type&& nh);

iterator insert(const_iterator hint, node_type&& nh);

Answer 3

这个应该有效：

<paper-toggle-button on-change="toggleShow" checked></paper-toggle-button>

尝试使用Polymer纸张切换按钮

3 个答案: