Question

我正在学习Polymer;

我无法在我的标签（父）组件中显示条件类名称。应将“有效”类添加到<li>元素，具体取决于子组件的“selected”属性。
我不确定父母和儿童组件之间的沟通方式是否正确。它有效，但感觉不对..

我的index.html文件

<link rel="import" href="components/tabs.html">
<link rel="import" href="components/tab.html">

<ikb-tabs>
    <ikb-tab heading="Tab #1">
        <p>Content of the first tab</p>
    </ikb-tab>
    <ikb-tab heading="Tab #2" selected>
        <p>Content of the second tab</p>
    </ikb-tab>
</ikb-tabs>

我的组件/ tabs.html文件

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

        <nav>
            <ul>
                <template is="dom-repeat" items="{{tabs}}">
                    <li>
                        <button on-tap="openTab">{{item.heading}}</button>
                    </li>
                </template>
            </ul>
        </nav>
        <content></content>
    </template>
    <script>
        Polymer({
            is: 'ikb-tabs',
            properties: {
                activeTab: Number
            },
            ready: function () {
                this.tabs = Polymer.dom(this).children;
            },
            openTab: function (e) {
                Polymer.dom(this).children.forEach(function (tab, index) {
                    tab.selected = index === e.model.index;
                });
            }
        });
    </script>
</dom-module>

我的组件/ tab.html文件

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="ikb-tab" attributes="heading">
    <template>
        <template is="dom-if" if="{{selected}}">
            <div>
                <content></content>
            </div>
        </template>
    </template>

    <script>
        Polymer({
            is: 'ikb-tab',
            properties: {
                heading: String,
                selected: {
                    type: Boolean
                }
            }
        });
    </script>
</dom-module>

Answer 1

我自己已经弄清楚了，我的代码有两个主要问题：

更新数组没有触发更新 只有添加，删除才能替换数组中的项目才会触发更新。我在Array中更改了Object的属性。 Polymer仅检查对该Object的引用，该引用保持不变。所以没有触发任何变化。解决方案：使用set函数更新Array（参见下面的代码）。

计算类需要特殊的语法： 我的班级=＆＃34; {{getClassName（item.selected）}＆＃34;没有添加任何类。我现在知道正确的语法是class $ =＆＃34; {{getClassName（item.selected））}}＆＃34;

更多信息：https://www.polymer-project.org/1.0/docs/devguide/data-binding#native-binding

简化的工作代码：

<dom-module id="ikb-tabs">
    <template>
        <nav>
            <ul>
                <template is="dom-repeat" items="{{tabs}}">
                    <li class$="{{getClassName(item.selected)}}">

                        <button on-tap="openTab">{{item.heading}}</button>
                    </li>
                </template>
            </ul>
        </nav>
        <div>
            <content></content>
        </div>
    </template>
    <script>
        Polymer({
            is: 'ikb-tabs',
            properties: {
                tabs: {
                    type: Array
                }
            },
            ready: function () {
                this.tabs = Polymer.dom(this).children;
            },
            openTab: function (e) {
                var self = this;

                this.tabs.forEach(function (tab, index) {
                    self.set('tabs.' + index + '.selected', index === e.model.index)
                });
            },
            getClassName: function (isSelected) {
                return isSelected ? 'active' : null;
            }
        });
    </script>
</dom-module>

从子组件派生的聚合条件类

1 个答案: