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



如果我为组件分配布尔属性,如何在 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为真或假?

谢谢

布尔属性在HTML中用作普通布尔属性, 例:

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

要打开/关闭,您需要删除或添加属性,然后

  • 开启:<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>

希望有帮助

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>

。因为您可以在固定位置属性中传入任何内容以将其设置为 true。但是,要将其设置为 false,您需要删除该属性。

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

如果要动态设置属性,请将变量作为属性从 osb-retailer-page 传递到查找零售商映射。

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

但是,查找零售商映射中 fixedPosition 属性的默认值必须为 false(或未设置,就像您的示例一样(。如果该属性默认为 true,则无法更改该属性。

布尔属性是根据属性的存在设置的:如果属性存在,则无论属性值如何,该属性都将设置为 true。如果该属性不存在,则该属性将获取其默认值。/.../要使布尔属性可通过标记进行配置,它必须默认为 false。如果它默认为 true,则不能从标记中将其设置为 false,因为属性的存在(无论是否具有值(都等同于 true。这是 Web 平台中属性的标准行为。

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

最新更新