在Polymer 1.0中，如何将数据绑定到元素的布尔属性？_Polymer

在Polymer 1.0中，如何将数据绑定到元素的布尔属性？

polymer

在Polymer 1.0中，如何将数据绑定到元素的布尔属性？,polymer,Polymer,如何绑定到元素的布尔属性。看来 <my-element a-property-of-type-boolean='{{someBoolean}}'></my-element> 不起作用，但我也找不到当它像这样暴露时如何绑定到它： <my-element a-property-of-type-boolean></my-element> 似乎可以选择将类型设置为Object而不是Boolean，但我不确定这种方法的有效性谢谢：-）如果在元素

如何绑定到元素的布尔属性。看来

<my-element a-property-of-type-boolean='{{someBoolean}}'></my-element>

不起作用，但我也找不到当它像这样暴露时如何绑定到它：

<my-element a-property-of-type-boolean></my-element>

似乎可以选择将类型设置为Object而不是Boolean，但我不确定这种方法的有效性

谢谢：-）

如果在元素上添加属性，则相关属性始终为true。例如：

<my-element a-property-of-type-boolean='false'></my-element>

你的元素：

<my-element a-property-of-type-boolean></my-element>

好的，对不起，伙计们。我没有做家庭作业。实际上，一切似乎都像我希望的那样正常工作，数据绑定也很好。这是我为证明我的观点而做的一个小例子

<!DOCTYPE html>
<html>
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
  <meta name='mobile-web-app-capable' content='yes'>
  <meta name='apple-mobile-web-app-capable' content='yes'>

  <script src='bower_components/webcomponentsjs/webcomponents.js'></script>
  <link rel='import' href='bower_components/polymer/polymer.html'>
</head>
<body>
<dom-module id='my-element'>
    <template>
        <div>In my element it is <div>{{aPropertyOfTypeBoolean}}</div></div>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'my-element',

        properties: {
            aPropertyOfTypeBoolean: {
                type: Boolean,
                value: false,
            }
        }
    });
</script>                               

<dom-module id='main-page'>
    <template>
        <paper-button on-tap='tap'>Click me</paper-button>
        <my-element a-property-of-type-boolean='{{someBoolean}}'></my-element>
        <div>In main page it is <div>{{someBoolean}}</div></div>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'main-page',

        properties: {
            someBoolean: {
                type: Boolean,
                value: false
            }
        },

        tap: function(){
            this.someBoolean = !this.someBoolean;
        }
    });
</script>

<main-page></main-page>


在我的元素中，它是{{aPropertyOfTypeBoolean}}
聚合物({
是‘我的元素’，
特性：{
aPropertyOfTypeBoolean：{
类型：布尔型，
值：false，
}
}
});
点击我
在主页中是{{someBoolean}}
聚合物({
是：'主页'，
特性：{
一些布尔值：{
类型：布尔型，
值：false
}
},
点击：函数（）{
this.someBoolean=！this.someBoolean；
}
});

正如您已经了解的，Polymer 1.0（）中布尔属性的行为已经改变，现在遵循HTML布尔属性的规范

你有不同的解决方案，但直到现在我还没有找到一个干净的解决方案

作为解决方案的序言，我将对您的代码做一点小小的改进（为有问题的元素添加一个Id）：

<dom-module id='main-page'>
    <template>
        <paper-button on-tap='tap'>Click me</paper-button>
        <my-element id="myElem" a-property-of-type-boolean></my-element>
        <div>In main page it is <div>{{someBoolean}}</div></div>
    </template>
</dom-module>

如果编辑属性以使用布尔属性，还可以如下设置其属性：（除非在定义为布尔属性的属性中使用

reflectToAttribute:true

），否则它不会反映在html中）：

或者，您可以使用隐藏或模板隐藏元素（如果解决方案）

隐藏时

在末尾添加$：

<my-element a-property-of-type-boolean$='{{someBoolean}}'></my-element>

Granze是否回答了您的问题？如果没有，请包含
元素的所有代码？具体地说，您希望如何进行绑定？特别是，
部分发生了什么，以及它如何与
交互？我不认为这是真的？或者至少不相关。问题是关于财产的约束；这里的示例不绑定任何属性，只绑定一个终端值false。无论如何，@franz thomsen的例子是正确的，布尔值的属性绑定工作正常。这并没有回答问题，只是指出问题中的一个困难。我真的很抱歉格式化，web编辑器是我最差的工具
tap: function() { if (this.aPropertyOfTypeBoolean) { Polymer.dom(this.$.myElem).removeAttribute('aPropertyOfTypeBoolean'); } else { Polymer.dom(this.$.myElem).setAttribute('aPropertyOfTypeBoolean', true); } }

tap: function() { this.$.myElem.set('aPropertyOfTypeBoolean', Boolean(this.aPropertyOfTypeBoolean)); }

<template is="dom-if" if="{{someBoolean}}"> <my-element a-property-of-type-boolean></my-element> </template> <template is="dom-if" if="{{!someBoolean}}"> <my-element></my-element> </template>

<my-element hidden$="{{someBoolean}}"></my-element> <my-element a-property-of-type-boolean hidden$="{{!someBoolean}}"></my-element>

<my-element a-property-of-type-boolean$='{{someBoolean}}'></my-element>