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