Question

如果我为组件分配一个布尔属性，如何在html中修改布尔值，而不在javascript中创建任何函数？

例如，假设我有以下组件：

Polymer({
  is: 'find-retailer-map',
  properties: {
    fixedPosition: {
      type: Boolean,
      notify: true,
    },
  },
});

<dom-module id="osb-retailer-page">
  <template>
    <find-retailer-map fixed-position></find-retailer-map>
  </template>
</dom-module>

如何在html中使fixed-position成为真或假？

由于

Answer 1

布尔属性在HTML中与普通布尔attrribute一样工作，例如：

<input type="checkbox" checked />
<input type="text" disabled />

要切换ON / OFF，您需要删除或添加属性，然后

开启：<find-retailer-map fixed-position></find-retailer-map>
关闭：<find-retailer-map></find-retailer-map>

以编程方式打开/关闭：

开启：<find-retailer-map fixed-position$="{{_your_toggle(true)}}"></find-retailer-map>
关闭：<find-retailer-map fixed-position$="{{_your_toggle(false)}}"></find-retailer-map>

希望有所帮助

Answer 2

HTML和Polymer中的布尔运算工作原理相同。要么他们在那里（真的），要么他们不在（假）。这三个人正在做同样的事情......

<find-retailer-map fixed-position></find-retailer-map>
<find-retailer-map fixed-position="true"></find-retailer-map>
<find-retailer-map fixed-position="false"></find-retailer-map>

...因为您可以传入fixed-position属性中的任何内容以将其设置为true。但是，要将其设置为false，您需要删除该属性。

<find-retailer-map></find-retailer-map>

如果要动态设置属性，请将变量（作为属性）从osb-retailer-page传入find-retailer map。

<dom-module id="osb-retailer-page">
  <template>
    <find-retailer-map fixed-position="[[aVariableInRetailerPage]]"></find-retailer-map>
  </template>
</dom-module>

但是，find-retailer-map中fixedPosition属性的默认值必须为false（或者不设置，就像您的示例一样）。如果默认为true，则无法更改该属性。

基于属性的存在来设置布尔属性：如果属性完全存在，则无论属性值如何，该属性都将设置为true。如果该属性不存在，则该属性将获取其默认值。   /.../   对于可从标记配置的布尔属性，它必须默认为false。如果默认为true，则不能通过标记将其设置为false，因为属性（包含或不包含值）的存在等于true。这是Web平台中属性的标准行为。

https://www.polymer-project.org/1.0/docs/devguide/properties

如何在聚合物1.0中修改html中的布尔属性值？

2 个答案:

https://www.polymer-project.org/1.0/docs/devguide/properties