1. 首頁
  2. 問答
  3. 使用聚合物1.0中的選項卡切換視圖

使用聚合物1.0中的選項卡切換視圖

2015-05-30 83 views
6

我想在聚合物中單擊某個選項卡時更改視圖。爲此，我想到了如 paper-tabs documentation中所述的使用紙張和鐵片頁面。使用聚合物1.0中的選項卡切換視圖

這是HTML，我要認識到這一點：

<html> 
 

 
<head> 
 
    <title>Test</title> 
 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
 
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html"> 
 
    <link rel="import" href="bower_components/iron-pages/iron-pages.html"> 
 
</head> 
 

 
<body> 
 

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

 
    {{selected}} 
 

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

更改標籤似乎工作。但它看起來像選中的變量沒有正確設置，因爲iron-pages元素不會更改視圖。我如何在Polymer 1.0中實現所需的數據綁定？我是否需要在兩個元素周圍創建一個自定義容器元素，以便爲它們提供一個可以訪問這個變量的範圍？

來源

2015-05-30 b-m-f

回答

9

如果要使大括號起作用，則必須將元素嵌入到template[is="dom-bind"]元素中。像這樣

<template is="dom-bind" id="scope"> 
    <span>{{number}}</span> 
</template> 
... 
<script> 
    window.addEventListener('WebComponentsReady', function() { //You have to make sure that all custom elements are loaded 
    var scope = document.querySelector("template#scope"); 
    scope.number = 1; // display the number 1 
    }); 
</script>

來源

2015-05-31 11:43:49

+0

非常感謝。閱讀聚合物文檔，我發現「is ='自動綁定'」。這是從0.5開始的。這是否與1.0中的「is ='dom-bind'」相同？ –

+1

這是一樣的。 –

相關問題

 相關問題