单击时聚合物更新 class

Question

我有一个 polymer 组件，它被设计用来获取一组选项卡并构建导航选项卡列表。我必须成功构建选项卡，但我的问题是每当我单击选项卡时，我的活动 class 都没有移到它。任何帮助都会很棒！

<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

此处，键是 item.key，您是通过引用而不是值进行比较。

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

我不确定这里键的值是什么，但我假设它是选项卡名称，在这种情况下也许可以尝试

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

Answer 2

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

在您的代码中，您使用 isActive 函数计算按钮的 class 属性，但这里的问题是它只被调用一次，因为 computed bindings仅当更改函数的参数之一并且定义每个参数时才重新计算。

因此，由于您的 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，一切正常。

单击时聚合物更新 class

Polymer update class on click

javascript

components

refresh

polymer