1. 首页
  2. 问答
  3. 使用聚合物1.0中的选项卡切换视图

使用聚合物1.0中的选项卡切换视图

2015-05-30 48 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

这是一样的。 –

相关问题

 相关问题