Question

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

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

不起作用，但我也无法找到如何在它暴露时如何绑定它：

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

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

谢谢： - ）

Answer 1

如果在元素上放置属性，则相关属性将始终为true。例如：

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

a-property-of-type-boolean是真的。

所以，如果你想在你的元素上使用一个布尔属性，我建议用默认值false声明属性，然后，如果你需要将值改为true，你可以在你身上添加属性元件。

你的聚合物原型：

Polymer({
  is: 'my-element',
  properties: {
    aPropertyOfTypeBoolean: {
      type: Boolean,
      value: false
    }
  }
});

你的元素：

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

Answer 2

正如您已经想到的那样，布尔属性的行为在Polymer 1.0（ref）中已经改变，现在遵循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>

（ref）您可以收听通知并手动添加和删除元素中的属性（ref）。

tap: function() {
  if (this.aPropertyOfTypeBoolean) {
    Polymer.dom(this.$.myElem).removeAttribute('aPropertyOfTypeBoolean');
  } else {
    Polymer.dom(this.$.myElem).setAttribute('aPropertyOfTypeBoolean', true);
  }
}

如果您编辑使用布尔属性，您还可以按如下方式设置它的属性:(除非您在属性中使用reflectToAttribute: true定义为布尔值，否则它不会反映在html中）：
```
tap: function() {
  this.$.myElem.set('aPropertyOfTypeBoolean', Boolean(this.aPropertyOfTypeBoolean));
}
```
或者您可以使用隐藏或 template-if 解决方案隐藏元素。

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

Answer 3

好的，对不起那些家伙。我没有做我的功课。实际上似乎所有东西都像我希望的那样工作并且数据绑定工作正常。这是我尝试证明我的观点的一个小例子

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

Answer 4

在结尾添加$：

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

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

4 个答案: