当单击另一个组件
时,我尝试重新渲染特定的组件
。当用户单击特定的按钮组件
时,sessionStorage
中的变量会发生变化,另一个组件
使用该变量来显示数据。单击后,我希望该特定组件重新渲染自身。我见过Ember Re-render component和 Ember Rerendering component within component ,但它们似乎不适用于我的情况。这是我的文件:
模板/组件/按钮/button-cancel.hbs
{{#each-in metaData as |module definition|}}
{{#if (eq definition.name "cancel_button") }}
<button class={{definition.css_class}} {{action "changeToAccounts"}}> Accounts </button>
{{/if}}
{{/each-in}}
{{yield}}
components/buttons/button-cancel.js
import Component from '@ember/component';
import MD from "../../utils/metadata";
export default Component.extend({
init: function() {
this._super(...arguments);
this.metaData = MD.create().getMetaViewStuff("Leads", "record", "buttons");
// console.log(this.metaData);
},
actions: {
changeToAccounts: function() {
sessionStorage.setItem('module', "Accounts");
}
}
});
templates/components/panels/list-panel.hbs
{{buttons/button-save}} <!--This button is same as button-cancel-->
{{buttons/button-cancel}}
{{field-list-headers}}
{{yield}}
components/field-list-headers(需要重新渲染的组件)
import Component from '@ember/component';
import MD from "../utils/metadata"
export default Component.extend({
init: function(){
this._super(...arguments);
this.metaData = MD.create().getMetaViewStuff(sessionStorage.getItem('module'), "list", "panels")
}
});
函数 getMetaViewStuff
getMetaViewStuff: function(module, submodule, item, i18n) {
if (this.modules[module]["views"][submodule]["meta"] !== undefined && this.modules[module]["views"][submodule]["meta"][item] !== undefined) {
let meta = this.modules[module]["views"][submodule]["meta"][item];
return meta;
}
return false;
}
最佳答案
我的建议是通过服务共享相同的属性,并使用该服务来更新本地存储并缓存所述服务上的值。我提供了 example它使用服务在两个组件之间共享值(我无法在旋转中使用本地存储)。
因此,假设我们想要以表格或有序列表的形式显示编程语言列表。我们有两个组件,可重复使用的 mode-changer
用于切换模式和 programming-languages
的按钮用于实际渲染列表的组件,它们都与共享 mode-service
交互.:
export default Ember.Service.extend({
init(){
this._super(...arguments);
//actually read from local storage here and set default on null
this.set('mode', 'list');
},
toggleMode(){
let newValue = this.get('mode') === 'list' ? 'table' : 'list';
//actually store to local storage here before caching on the service
this.set('mode', newValue);
}
});
想象一下这个模板显示了两个组件:
{{programming-languages languages=languages}}
{{mode-changer}}
mode-changer
注入(inject)mode-service
,用它派生逻辑按钮文本并切换 mode-service
的mode
属性(property)通过 toggleMode
:
export default Ember.Component.extend({
modeService: inject(),
buttonText: computed('modeService.mode', function(){
let mode = this.get('modeService.mode');
return mode === 'list' ? "Change to table" : "Change to list";
}),
actions: {
toggleMode(){
let modeService = this.get('modeService');
modeService.toggleMode();
}
}
});
mode-changer
的组成部分:
<button onclick={{action 'toggleMode'}}>{{buttonText}}</button>
programming-languages
组件的渲染模式基于 modeService.mode
通过计算属性:
export default Ember.Component.extend({
modeService: inject(),
renderList: computed('modeService.mode', function(){
let mode = this.get('modeService.mode');
return mode === 'list';
})
});
这样更改为modeService.mode
将导致计算属性无效并触发组件的渲染。
{{#if renderList}}
<ol>
{{#each languages as |language|}}
<li>{{language}}</li>
{{/each}}
</ol>
{{else}}
<table>
<th>Language</th>
{{#each languages as |language|}}
<tr>{{language}}</tr>
{{/each}}
</table>
{{/if}}
在 Ember 中,服务是单例的,因此这种共享在许多情况下都是合适的。对我来说,这比任何其他实际存储/检索对组件本身的引用并调用其渲染函数的解决方案要好得多。
关于javascript - 从另一个组件重新渲染一个组件 Ember,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53337816/