点击聚合物更新类

Question

我有聚合物组件，旨在获取一系列选项卡并构建导航选项卡列表。我必须成功构建选项卡，但我的问题是每当我单击一个选项卡时，我的活动课程都不会移动到它。任何帮助都会很棒！

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="basic-nav">
  <template>
    <style>
      .active{
        color: red;
      }
    </style>

    <template is="dom-repeat" items="{{tabs}}">
      <button class$="{{isActive(item.key, 'btn btn-underline')}}" on-click="changeTab">
          {{item.label}} {{item.key === tab}}
      </button>
    </template>

  </template>


  <script>
  Polymer({
    is: "basic-nav",
    properties:{
      tab: {
        type: String,
        notify: true
      }
    },
    isActive: function(key, constants){
      var classList = '';
      classList += constants || '';
      if (key === this.tab) classList += ' active';
      return classList;
    },
    changeTab: function(e){
      this.tab = e.model.item.key;
    },
    ready: function() {
      this.tabs = [
        {key: 'A',label: 'sweet'},
        {key: 'B',label: 'nice'}
      ];
    }
  });
  </script>

</dom-module>

Answer 1

您的问题在于计算绑定的工作方式。

在您的代码中，您使用isActive 函数来计算按钮的class 属性，但这里的问题是它只被调用一次，因为计算的绑定仅在参数之一时重新计算功能改变了，每个参数都被定义了。

因此，由于您的 isActive 函数仅接收 key 和 constants 并且此处的代码从未更改，因此仅在创建元素实例时才会计算它，因为您的 changeTab 函数仅更改tab 属性。

要获得所需的行为，您可以将tab 作为参数添加到isActive 函数，如下所示，请记住，您还应该为tab 提供一个默认值，以便执行计算绑定那个案例。

 <!-- Button html -->
<button class$="{{isActive(item.key, 'btn btn-underline', tab)}}" on-click="changeTab">
      {{item.label}} {{item.key === tab}}
  </button>

 <!-- Javascript function-->
isActive: function(key, constants, tab){
  var classList = '';
  classList += constants || '';
  if (key === tab) classList += ' active';
  return classList;
}

这是fiddle，一切正常。

Answer 2

这里，key 是 item.key，你是通过引用进行比较，而不是值。

if (key === this.tab) classList += ' active';

我不确定 key 的值是什么，但我假设它是标签名称，在这种情况下也许可以尝试

if (key === this.tab.type) { ... }