如何在浏览器中重新显示后 "clean" 聚合物组件中的数据
How to "clean" data in a polymer component after reshowing in browser
我想用 Polymer 2.0 实现以下目标:
预期行为:每次我访问页面 /negotiating-view/{id} 时,所有输入组件(单选按钮)都未选中。
实际行为:每次我访问该页面时,单选按钮都有以前填写的值,除非我按 "refresh"。
我最初的想法是通过构造函数或ready方法清除单选按钮。但是,只有在我第一次访问该页面时才达到这些方法。所以对我来说,它看起来像是渲染了一次组件并保留了所有值。
在我的应用程序组件我使用铁页:
<iron-pages selected="[[page]]" attr-for-selected="name" selected-attribute="visible"
fallback-selection="view404" role="main">
[..]
<market-view
name="market-view"></market-view>
<negotiating-view
name="negotiating-view"
user="{{user}}"
route={{subroute}}></negotiating-view>
</iron-pages>
与 js:
_routePageChanged(page) {
// If no page was found in the route data, page will be an empty string.
// Default to 'view1' in that case.
this.page = page || 'home-view'
}
_pageChanged(page) {
// Load page import on demand. Show 404 page if fails
const resolvedPageUrl = this.resolveUrl(page + '.html')
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true)
}
由 polymer init 提供。可以通过纸按钮访问谈判视图,例如 market-view
组件(简单的锚标记具有相同的结果)
<paper-button raised class="orange-button" on-tap="_negotiation" data-args$="{{item.id}}">Negotiate contract</paper-button>
[..]
_negotiation(e) {
var apiId = e.target.getAttribute('data-args')
this.set('route.path', '/negotiating-view/' + apiId)
}
与 negotiation-view 相比,我有以下单选按钮,在第一次访问后仍保持选中状态:
<paper-radio-group selected="{{selectedSubs}}">
<paper-radio-button name="Basic">Basic</paper-radio-button>
<paper-radio-button name="Regular">Regular</paper-radio-button>
<paper-radio-button name="Intensive">Intensive</paper-radio-button>
</paper-radio-group>
我真正想要的是,每次呈现 negotiation-view 组件时,它会清除字符串 selectedSubs。
感谢您的宝贵时间:)
所以我修复了它:
而不是使用 this.set('route.path',路径)使用:
document.location.assign('/negotiating-view/' + apiId)
如文档所述here assing()
Loads a new document
new这个词触发了我尝试这个,结果解决了!
我想用 Polymer 2.0 实现以下目标:
预期行为:每次我访问页面 /negotiating-view/{id} 时,所有输入组件(单选按钮)都未选中。 实际行为:每次我访问该页面时,单选按钮都有以前填写的值,除非我按 "refresh"。
我最初的想法是通过构造函数或ready方法清除单选按钮。但是,只有在我第一次访问该页面时才达到这些方法。所以对我来说,它看起来像是渲染了一次组件并保留了所有值。
在我的应用程序组件我使用铁页:
<iron-pages selected="[[page]]" attr-for-selected="name" selected-attribute="visible"
fallback-selection="view404" role="main">
[..]
<market-view
name="market-view"></market-view>
<negotiating-view
name="negotiating-view"
user="{{user}}"
route={{subroute}}></negotiating-view>
</iron-pages>
与 js:
_routePageChanged(page) {
// If no page was found in the route data, page will be an empty string.
// Default to 'view1' in that case.
this.page = page || 'home-view'
}
_pageChanged(page) {
// Load page import on demand. Show 404 page if fails
const resolvedPageUrl = this.resolveUrl(page + '.html')
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true)
}
由 polymer init 提供。可以通过纸按钮访问谈判视图,例如 market-view
组件(简单的锚标记具有相同的结果)
<paper-button raised class="orange-button" on-tap="_negotiation" data-args$="{{item.id}}">Negotiate contract</paper-button>
[..]
_negotiation(e) {
var apiId = e.target.getAttribute('data-args')
this.set('route.path', '/negotiating-view/' + apiId)
}
与 negotiation-view 相比,我有以下单选按钮,在第一次访问后仍保持选中状态:
<paper-radio-group selected="{{selectedSubs}}">
<paper-radio-button name="Basic">Basic</paper-radio-button>
<paper-radio-button name="Regular">Regular</paper-radio-button>
<paper-radio-button name="Intensive">Intensive</paper-radio-button>
</paper-radio-group>
我真正想要的是,每次呈现 negotiation-view 组件时,它会清除字符串 selectedSubs。
感谢您的宝贵时间:)
所以我修复了它:
而不是使用 this.set('route.path',路径)使用:
document.location.assign('/negotiating-view/' + apiId)
如文档所述here assing()
Loads a new document
new这个词触发了我尝试这个,结果解决了!