2016-02-27 4 views
1

Я создаю простое приложение с несколькими вкладками и страницами, связанными с ними. Я могу заставить это работать нормально, проблема в том, что по умолчанию выбрана вкладка.set default tab/page selection

К примеру, у меня есть базовая структура, как это:

<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> 

работает отлично. Однако, когда я открываю страницу, ни одна из вкладок не будет выбрана по умолчанию. Если бы я хотел это сделать, я мог бы назначить «выбранный» равным определенное значение, например:

<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> 

Проблема с этим состоит в том, что затем вкладку/страница связывания не работает.

Итак, простой вопрос, как сохранить привязку, а также установить вкладку по умолчанию?

ответ

2

Хорошее программирование с использованием полимеров охватывает эти элементы в пользовательском элементе, представляющем приложение (или какой-либо подраздел приложения). Добавление свойства selected в разделе properties окружающего элемента со значением по умолчанию будет устанавливать вкладку по умолчанию [Warning: Still a Polymer newbie]. Возможно, добавьте что-то вроде:

Polymer({ 
    is: 'x-custom', 

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

Вы говорите, место страницы в виде отдельного элемента или вкладки? Я все еще пытаюсь обернуть голову вокруг элементов гнездования. Я могу заставить его работать для простых дисплеев, но он ломается, когда я пытаюсь направить разные виды. – user3180105

+0

По-прежнему делаю какую-то головную упаковку. Я говорю, что все приложение должно быть настраиваемым элементом. 'index.html' должен быть минимальным экземпляром элемента. Таким образом, у вас есть раздел 'properties' для размещения привязок по умолчанию, например, здесь значение' selected'. –

+0

Ах да, я понял это сейчас. Размещался полный заголовок/вкладки/страницы в элементе, который затем мог установить значение по умолчанию в свойствах. Довольно изящный, как только вы его заработаете – user3180105

0

Ну, я думаю, что готовая функция - это способ инициализации!

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

Используйте решение свойств, если вы хотите «выбран», которые будут использоваться за пределами вашего компонента