Polymer 设置默认选项卡/页面选择

我正在构建一个简单的应用程序，其中有一些选项卡和页面链接到它们。我可以让它正常工作，问题是默认情况下没有选择选项卡

例如，我有这样一个基本结构：

<paper-tabs attr-for-selected="data-route" selected="{{selected}}">
  <paper-tab data-route="1">Tab 1</paper-tab>
  <paper-tab data-route="2">Tab 2</paper-tab>
  <paper-tab data-route="3">Tab 3</paper-tab>
</paper-tabs>

<iron-pages selected="{{selected}}">
  <div data-route="1">Page 1</div>
  <div data-route="2">Page 2</div>
  <div data-route="3">Page 3</div>
</iron-pages>

表1
表2
表3
第1页
第2页
第3页

很好。但是，当我打开页面时，默认情况下没有选择任何选项卡。如果我想这样做，我可以将“selected”指定为等于特定值，例如：

<paper-tabs attr-for-selected="data-route" selected="1">
  <paper-tab data-route="1">TAB 1</paper-tab>
  <paper-tab data-route="2">TAB 2</paper-tab>
  <paper-tab data-route="3">TAB 3</paper-tab>
</paper-tabs>

表1
表2
表3

这样做的问题是选项卡/页面绑定不起作用

---

所以，一个简单的问题是，在设置默认选项卡的同时如何保持绑定？

好的聚合编程将这些元素封装在表示应用程序（或应用程序的某个子部分）的自定义元素中。在周围元素的

属性

部分中添加一个

选定的

属性（带有默认值），将设置默认选项卡[警告：仍然是新手]。或许可以添加如下内容：

Polymer({
    is: 'x-custom',

    properties: {
        selected: {
            value: 1
        }
    }
});

---

嗯，我认为ready函数是初始化的方法

ready: function() {
  this.selected = 0;
}

---

如果您希望在组件外部使用“选定的”，请使用属性解决方案

您是说将页面放置在单独的元素中还是选项卡中？我仍在试图对嵌套元素进行思考。我可以让它用于简单的显示，但当我尝试路由不同的视图时，直到我自己做一些头部包裹时，它对我来说就崩溃了。我是说所有的应用程序都应该是自定义元素

index.html

应该是元素的最小实例化。这样，您就有了一个

properties

部分来放置默认绑定，比如这里的

selected

值。在元素中放置完整的标题/选项卡/页面，然后可以在属性中设置默认值。一旦你开始工作，它就相当漂亮了